Html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>上传图片!</title>
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="/styles.css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
 <div id="dropbox">
 <span class="message">拖曳图片到这此上传</span>
 </div>
<!-- Including The jQuery Library -->
 <script type="text/javascript" src="/jquery.min.js"></script>
 <!-- Including the HTML5 Uploader plugin -->
 <script src="/jquery.filedrop.js"></script>
 <!-- The main script file -->
        <script src="/js/script.js?1"></script>
    </body>  
</html> 

jquery.filedrop.js

/*
 * Default text - jQuery plugin for html5 dragging files from desktop to browser
 *
 * Author: Weixi Yen
 *
 * Email: [Firstname][Lastname]@gmail.com
 * 
 * Copyright (c) 2010 Resopollution
 * 
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.github.com/weixiyen/jquery-filedrop
 *
 * Version:  0.1.0
 *
 * Features:
 *      Allows sending of extra parameters with file.
 *      Works with Firefox 3.6+
 *      Future-compliant with HTML5 spec (will work with Webkit browsers and IE9)
 * Usage:
 *  See README at project homepage
 *
 */
(function($){

    jQuery.event.props.push("dataTransfer");
    var opts = {},
        default_opts = {
            url: '',
            refresh: 1000,
            paramname: 'userfile',
            maxfiles: 25,
            maxfilesize: 10, // MBs
            data: {},
            drop: empty,
            dragEnter: empty,
            dragOver: empty,
            dragLeave: empty,
            docEnter: empty,
            docOver: empty,
            docLeave: empty,
            beforeEach: empty,
            afterAll: empty,
            rename: empty,
            error: function(err, file, i){alert(err);},
            uploadStarted: empty,
            uploadFinished: empty,
            progressUpdated: empty,
            speedUpdated: empty
        },
        errors = ["BrowserNotSupported", "TooManyFiles", "FileTooLarge"],
        doc_leave_timer,
        stop_loop = false,
        files_count = 0,
        files;

    $.fn.filedrop = function(options) {
        opts = $.extend( {}, default_opts, options );

        this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
        $(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
    };

    function drop(e) {
        opts.drop(e);
        files = e.dataTransfer.files;
        if (files === null || files === undefined) {
            opts.error(errors[0]);
            return false;
        }

        files_count = files.length;
        upload();
        e.preventDefault();
        return false;
    }

    function getBuilder(filename, filedata, boundary) {
        var dashdash = '--',
            crlf = 'rn',
            builder = '';

        $.each(opts.data, function(i, val) {
            if (typeof val === 'function') val = val();
            builder += dashdash;
            builder += boundary;
            builder += crlf;
            builder += 'Content-Disposition: form-data; name="'+i+'"';
            builder += crlf;
            builder += crlf;
            builder += val;
            builder += crlf;
        });

        builder += dashdash;
        builder += boundary;
        builder += crlf;
        builder += 'Content-Disposition: form-data; name="'+opts.paramname+'"';
        builder += '; filename="' + filename + '"';
        builder += crlf;

        builder += 'Content-Type: application/octet-stream';
        builder += crlf;
        builder += crlf; 

        builder += filedata;
        builder += crlf;

        builder += dashdash;
        builder += boundary;
        builder += dashdash;
        builder += crlf;
        return builder;
    }

    function progress(e) {
        if (e.lengthComputable) {
            var percentage = Math.round((e.loaded * 100) / e.total);
            if (this.currentProgress != percentage) {

                this.currentProgress = percentage;
                opts.progressUpdated(this.index, this.file, this.currentProgress);

                var elapsed = new Date().getTime();
                var diffTime = elapsed - this.currentStart;
                if (diffTime >= opts.refresh) {
                    var diffData = e.loaded - this.startData;
                    var speed = diffData / diffTime; // KB per second
                    opts.speedUpdated(this.index, this.file, speed);
                    this.startData = e.loaded;
                    this.currentStart = elapsed;
                }
            }
        }
    }

    function upload() {
        stop_loop = false;
        if (!files) {
            opts.error(errors[0]);
            return false;
        }
        var filesDone = 0,
            filesRejected = 0;

        if (files_count > opts.maxfiles) {
            opts.error(errors[1]);
            return false;
        }

        for (var i=0; i<files_count; i++) {
            if (stop_loop) return false;
            try {
                if (beforeEach(files[i]) != false) {
                    if (i === files_count) return;
                    var reader = new FileReader(),
                        max_file_size = 1048576 * opts.maxfilesize;

                    reader.index = i;
                    if (files[i].size > max_file_size) {
                        opts.error(errors[2], files[i], i);
                        filesRejected++;
                        continue;
                    }

                    reader.onloadend = send;
                    reader.readAsBinaryString(files[i]);
                } else {
                    filesRejected++;
                }
            } catch(err) {
                opts.error(errors[0]);
                return false;
            }
        }

        function send(e) {
            // Sometimes the index is not attached to the
            // event object. Find it by size. Hack for sure.
            if (e.target.index == undefined) {
                e.target.index = getIndexBySize(e.total);
            }

            var xhr = new XMLHttpRequest(),
                upload = xhr.upload,
                file = files[e.target.index],
                index = e.target.index,
                start_time = new Date().getTime(),
                boundary = '------multipartformboundary' + (new Date).getTime(),
                builder;

            newName = rename(file.name);
            if (typeof newName === "string") {
                builder = getBuilder(newName, e.target.result, boundary);
            } else {
                builder = getBuilder(file.name, e.target.result, boundary);
            }

            upload.index = index;
            upload.file = file;
            upload.downloadStartTime = start_time;
            upload.currentStart = start_time;
            upload.currentProgress = 0;
            upload.startData = 0;
            upload.addEventListener("progress", progress, false);

            xhr.open("POST", opts.url, true);
            xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' 
                + boundary);

            xhr.sendAsBinary(builder);  

            opts.uploadStarted(index, file, files_count);  

            xhr.onload = function() { 
                if (xhr.responseText) {
                var now = new Date().getTime(),
                    timeDiff = now - start_time,
                    result = opts.uploadFinished(index, file, jQuery.parseJSON(xhr.responseText), timeDiff);
                    filesDone++;
                    if (filesDone == files_count - filesRejected) {
                        afterAll();
                    }
                if (result === false) stop_loop = true;
                }
            };
        }
    }

    function getIndexBySize(size) {
        for (var i=0; i < files_count; i++) {
            if (files[i].size == size) {
                return i;
            }
        }

        return undefined;
    }

    function rename(name) {
        return opts.rename(name);
    }

    function beforeEach(file) {
        return opts.beforeEach(file);
    }

    function afterAll() {
        return opts.afterAll();
    }

    function dragEnter(e) {
        clearTimeout(doc_leave_timer);
        e.preventDefault();
        opts.dragEnter(e);
    }

    function dragOver(e) {
        clearTimeout(doc_leave_timer);
        e.preventDefault();
        opts.docOver(e);
        opts.dragOver(e);
    }

    function dragLeave(e) {
        clearTimeout(doc_leave_timer);
        opts.dragLeave(e);
        e.stopPropagation();
    }

    function docDrop(e) {
        e.preventDefault();
        opts.docLeave(e);
        return false;
    }

    function docEnter(e) {
        clearTimeout(doc_leave_timer);
        e.preventDefault();
        opts.docEnter(e);
        return false;
    }

    function docOver(e) {
        clearTimeout(doc_leave_timer);
        e.preventDefault();
        opts.docOver(e);
        return false;
    }

    function docLeave(e) {
        doc_leave_timer = setTimeout(function(){
            opts.docLeave(e);
        }, 200);
    }

    function empty(){}

    try {
        if (XMLHttpRequest.prototype.sendAsBinary) return;
        XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
            function byteValue(x) {
                return x.charCodeAt(0) & 0xff;
            }
            var ords = Array.prototype.map.call(datastr, byteValue);
            var ui8a = new Uint8Array(ords);
            this.send(ui8a.buffer);
        }
    } catch(e) {}

})(jQuery);



script.js

 $(function(){

    var dropbox = $('#dropbox'),
        message = $('.message', dropbox);

    dropbox.filedrop({
        // The name of the $_FILES entry:
        paramname:'pic',

        maxfiles: 500,
        maxfilesize: 50,
        url: 'file.php',

        uploadFinished:function(i,file,response){
            $.data(file).addClass('done');
            // response is the JSON object that post_file.php returns
        },

        error: function(err, file) {
            switch(err) {
                case 'BrowserNotSupported':
                    showMessage('Your browser does not support HTML5 file uploads!');
                    break;
                case 'TooManyFiles':
                    alert('Too many files! Please select 5 at most! (configurable)');
                    break;
                case 'FileTooLarge':
                    alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
                    break;
                default:
                    break;
            }
        },

        // Called before each upload is started
        beforeEach: function(file){
            if(!file.type.match(/^image//)){
                alert('Only images are allowed!');

                // Returning false will cause the
                // file to be rejected
                return false;
            }
        },

        uploadStarted:function(i, file, len){
            createImage(file);
        },

        progressUpdated: function(i, file, progress) {
            $.data(file).find('.progress').width(progress);
        }

    });

    var template = '<div class="preview">'+
                        '<span class="imageHolder">'+
                            '<img src="data:image/gif;base64,R0lGODlhCgAKAJEDAMzMzP9mZv8AAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAADACwAAAAACgAKAAACF5wncgaAGgJzJ647cWua4sOBFEd62VEAACH5BAUAAAMALAEAAAAIAAMAAAIKnBM2IoMDAFMQFAAh+QQFAAADACwAAAAABgAGAAACDJwHMBGofKIRItJYAAAh+QQFAAADACwAAAEAAwAIAAACChxgOBPBvpYQYxYAIfkEBQAAAwAsAAAEAAYABgAAAgoEhmPJHOGgEGwWACH5BAUAAAMALAEABwAIAAMAAAIKBIYjYhOhRHqpAAAh+QQFAAADACwEAAQABgAGAAACDJwncqi7EQYAA0p6CgAh+QQJAAADACwHAAEAAwAIAAACCpRmoxoxvQAYchQAOw==" />'+
                            '<span class="uploaded"></span>'+
                        '</span>'+
                        '<div class="progressHolder">'+
                            '<div class="progress"></div>'+
                        '</div>'+
                    '</div>'; 

    function createImage(file){

        var preview = $(template), 
            image = $('img', preview);

        var reader = new FileReader();

        image.width = 100;
        image.height = 100;

        reader.onload = function(e){

            // e.target.result holds the DataURL which
            // can be used as a source of the image:

            image.attr('src',e.target.result);
        };

        // Reading the file as a DataURL. When finished,
        // this will trigger the onload function above:
        reader.readAsDataURL(file);

        message.hide();
        preview.appendTo(dropbox);

        // Associating a preview container
        // with the file, using jQuery's $.data():

        $.data(file,preview);
    }

    function showMessage(msg){
        message.html(msg);
    }

});


点赞(2) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部