jQuery文件上传 - 配置和运行

Question

I'm using this plugin: jQuery File Upload

My HTML:

<input id="fileupload" type="file" name="files[]" data-url="upload.php" multiple>
        <script src="/js/vendor/jquery.ui.widget.js"></script>
        <script src="/js/jquery.iframe-transport.js"></script>
        <script src="/js/jquery.fileupload.js"></script>
        <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
        <script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
        <script src="/js/jquery.fileupload-fp.js"></script>

        <div id="dropzone" class="fade well">Drop files here</div>

My JS:

$(document).ready(function() {

                $('#fileupload').fileupload({
                    dataType: 'json',
                    dropZone: $('#dropzone'),
                    singleFileUploads: false,
                    add: function (e, data) {
                        $(this).fileupload('process', data).done(function () {
                            data.submit();
                        });
                    },
                    done: function (e, data) {
                        $.each(data.result, function (index, file) {
                            $('<p/>').text(file.name).appendTo(document.body);
                        });
                    },
                    process: [
                        {
                            action: 'load',
                            fileTypes: /^image\/(gif|jpeg|png)$/,
                            maxFileSize: 20000000 // 20MB
                        },
                        {
                            action: 'resize',
                            maxWidth: 1920,
                            maxHeight: 1080
                        },
                        {
                            action: 'save'
                        }
                    ]
                });
                $('#fileupload').bind('fileuploadsubmit', function (e, data) {
                    // The example input, doesn't have to be part of the upload form:
                    var GAL = $('#galleryId');
                    data.formData = {
                        galleryId: GAL.val(),
                        type: 'gallery',
                        entityId: 1
                    }
                    return true;
                });

                $(document).bind('dragover', function (e) {
                    var dropZone = $('#dropzone'),
                        timeout = window.dropZoneTimeout;
                    if (!timeout) {
                        dropZone.addClass('in');
                    } else {
                        clearTimeout(timeout);
                    }
                    if (e.target === dropZone[0]) {
                        dropZone.addClass('hover');
                    } else {
                        dropZone.removeClass('hover');
                    }
                    window.dropZoneTimeout = setTimeout(function () {
                        window.dropZoneTimeout = null;
                        dropZone.removeClass('in hover');
                    }, 100);
                });

                $(document).bind('drop dragover', function (e) {
                    e.preventDefault();
                });

});

Things I'd love to achieve:

1. Resizing images at client side
2. Then send images with additional form data (data are not comming to server side script) to upload.php

Thanks a lot in advance.

Answer 1

Jquery File upload is not the right choice for my request. I'm now successfully using Plupload.