Blame view

dragndrop.html 3.76 KB
f27a7ff3   Arsisakarn Srilatanart   Initial commit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <title>Plupload - jQuery UI Widget</title>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
    <link rel="stylesheet" href="js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

    <!-- production -->
    <script type="text/javascript" src="js/plupload.full.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.plupload/jquery.ui.plupload.js"></script>

</head>
<body>

0a4997df   Arsisakarn Srilatanart   เพิ่มการแก้ชื่อไฟ...
21
<form id="form" method="post" action="dump.php">
f27a7ff3   Arsisakarn Srilatanart   Initial commit
22
23
24
25
    <div id="uploader">
        <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
    </div>
    <br />
0a4997df   Arsisakarn Srilatanart   เพิ่มการแก้ชื่อไฟ...
26
27
28
    <div id="filelist">

    </div>
f27a7ff3   Arsisakarn Srilatanart   Initial commit
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
    <input type="submit" value="Submit" />
</form>



<script type="text/javascript">
    // Initialize the widget when the DOM is ready
    $(function() {
        $("#uploader").plupload({
            // General settings
            runtimes : 'html5',
            url : './upload.php',

            // User can upload no more then 20 files in one go (sets multiple_queues to false)
            max_file_count: 20,

            chunk_size: '1mb',

            // Resize images on clientside if we can
//            resize : {
//                width : 200,
//                height : 200,
//                quality : 90,
//                crop: true // crop to exact dimensions
//            },

            buttons: {
                browse: false,
                start: false,
                stop: true
            },

            filters : {
                // Maximum file size
                max_file_size : '1000mb',
                // Specify what files to browse for
                mime_types: [
                    {title : "Image files", extensions : "jpg,gif,png"},
                    {title : "Zip files", extensions : "zip"}
                ]
            },

            // Rename files by clicking on their titles
            rename: false,

            // Sort files
            sortable: true,

            // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
            dragdrop: true,

            // Views to activate
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },

            prevent_duplicates: true,

0a4997df   Arsisakarn Srilatanart   เพิ่มการแก้ชื่อไฟ...
89
90
91
92
93
94
95
96
97
98
99
            autostart: true,

            init: {
                'FileUploaded': function(up, file, info) {
                    var obj = JSON.parse(info.response);
                    //console.log(obj);
                    //console.log(obj.cleanFileName);
                    document.getElementById('filelist').innerHTML += '<input type="hidden" name="imgName[]" value="' + obj.cleanFileName + '">';
                }

            }
f27a7ff3   Arsisakarn Srilatanart   Initial commit
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

        });

        // Handle the case when form was submitted before uploading has finished
        $('#form').submit(function(e) {
            // Files in queue upload them first
            if ($('#uploader').plupload('getFiles').length > 0) {

                // When all files are uploaded submit form
                $('#uploader').on('complete', function() {
                    $('#form')[0].submit();
                });

                $('#uploader').plupload('start');
            } else {
                alert("You must have at least one file in the queue.");
            }
            return false; // Keep the form from submitting
        });
    });
</script>
</body>
</html>