如何使用fileupload.js上传多个文件?

时间:2015-09-29 08:34:36

标签: javascript html css

!function ($) {

  "use strict"; // jshint ;_

 /* FILEUPLOAD PUBLIC CLASS DEFINITION
  * ================================= */

  var Fileupload = function (element, options) {
    this.$element = $(element)
    this.type = this.$element.data('uploadtype') || (this.$element.find('.thumbnail').length > 0 ? "image" : "file")

    this.$input = this.$element.find(':file')
    if (this.$input.length === 0) return

    this.name = this.$input.attr('name') || options.name

    this.$hidden = this.$element.find('input[type=hidden][name="'+this.name+'"]')
    if (this.$hidden.length === 0) {
      this.$hidden = $('<input type="hidden" />')
      this.$element.prepend(this.$hidden)
    }

    this.$preview = this.$element.find('.fileupload-preview')
    var height = this.$preview.css('height')
    if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)

    this.original = {
      'exists': this.$element.hasClass('fileupload-exists'),
      'preview': this.$preview.html(),
      'hiddenVal': this.$hidden.val()
    }

    this.$remove = this.$element.find('[data-dismiss="fileupload"]')

    this.$element.find('[data-trigger="fileupload"]').on('click.fileupload', $.proxy(this.trigger, this))

    this.listen()
  }

  Fileupload.prototype = {

    listen: function() {
      this.$input.on('change.fileupload', $.proxy(this.change, this))
      $(this.$input[0].form).on('reset.fileupload', $.proxy(this.reset, this))
      if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this))
    },

    change: function(e, invoked) {
      if (invoked === 'clear') return

      var file = e.target.files !== undefined ? e.target.files[0] : (e.target.value ? { name: e.target.value.replace(/^.+\\/, '') } : null)

      if (!file) {
        this.clear()
        return
      }

      this.$hidden.val('')
      this.$hidden.attr('name', '')
      this.$input.attr('name', this.name)

      if (this.type === "image" && this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") {
        var reader = new FileReader()
        var preview = this.$preview
        var element = this.$element

        reader.onload = function(e) {
          preview.html('<img src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />')
          element.addClass('fileupload-exists').removeClass('fileupload-new')
        }

        reader.readAsDataURL(file)
      } else {
        this.$preview.text(file.name)
        this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
      }
    },

    clear: function(e) {
      this.$hidden.val('')
      this.$hidden.attr('name', this.name)
      this.$input.attr('name', '')

      //ie8+ doesn't support changing the value of input with type=file so clone instead
      if (navigator.userAgent.match(/msie/i)){ 
          var inputClone = this.$input.clone(true);
          this.$input.after(inputClone);
          this.$input.remove();
          this.$input = inputClone;
      }else{
          this.$input.val('')
      }

      this.$preview.html('')
      this.$element.addClass('fileupload-new').removeClass('fileupload-exists')

      if (e) {
        this.$input.trigger('change', [ 'clear' ])
        e.preventDefault()
      }
    },

    reset: function(e) {
      this.clear()

      this.$hidden.val(this.original.hiddenVal)
      this.$preview.html(this.original.preview)

      if (this.original.exists) this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
       else this.$element.addClass('fileupload-new').removeClass('fileupload-exists')
    },

    trigger: function(e) {
      this.$input.trigger('click')
      e.preventDefault()
    }
  }


 /* FILEUPLOAD PLUGIN DEFINITION
  * =========================== */

  $.fn.fileupload = function (options) {
    return this.each(function () {
      var $this = $(this)
      , data = $this.data('fileupload')
      if (!data) $this.data('fileupload', (data = new Fileupload(this, options)))
      if (typeof options == 'string') data[options]()
    })
  }

  $.fn.fileupload.Constructor = Fileupload


 /* FILEUPLOAD DATA-API
  * ================== */

  $(document).on('click.fileupload.data-api', '[data-provides="fileupload"]', function (e) {
    var $this = $(this)
    if ($this.data('fileupload')) return
    $this.fileupload($this.data())

    var $target = $(e.target).closest('[data-dismiss="fileupload"],[data-trigger="fileupload"]');
    if ($target.length > 0) {
      $target.trigger('click.fileupload')
      e.preventDefault()
    }
  })
}(window.jQuery);

我正在使用此js上传文件。有了它我可以上传和预览只有一个文件,但我想上传多个文件与预览任何人都可以帮助我进行多个文件上传。 我想通过预览在一段时间内上传多个文件。 见example

1 个答案:

答案 0 :(得分:1)

<div id="mulitplefileuploader">Upload</div>

<div id="status"></div>
<script>

$(document).ready(function()
{

var settings = {
    url: "upload.php",
    method: "POST",
    allowedTypes:"jpg,png,gif,doc,pdf,zip",
    fileName: "myfile",
    multiple: true,
    onSuccess:function(files,data,xhr)
    {
        $("#status").html("<font color='green'>Upload is success</font>");

    },
    afterUploadAll:function()
    {
        alert("all images uploaded!!");
    },
    onError: function(files,status,errMsg)
    {       
        $("#status").html("<font color='red'>Upload is Failed</font>");
    }
}
$("#mulitplefileuploader").uploadFile(settings);

});
</script>
    //php code
    $output_dir = "./uploads/";



    if(isset($_FILES["myfile"]))
    {
        $ret = array();

        $error =$_FILES["myfile"]["error"];
       {

            if(!is_array($_FILES["myfile"]['name'])) //single file
            {
                $RandomNum   = time();

                $ImageName      = $_FILES['myfile']['name'];
                $ImageType      = $_FILES['myfile']['type']; //"image/png", image/jpeg etc.
                if (is_dir($output_dir) && is_writable($output_dir)) {
                    move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $ImageName);
                    //echo "<br> Error: ".$_FILES["myfile"]["error"];
                     $ret[$ImageName]= $output_dir.$ImageName;
                }
                 else {
                        echo 'Upload directory is not writable, or does not exist.';
                    }
            }
            else
            {
                $fileCount = count($_FILES["myfile"]['name']);
                for($i=0; $i < $fileCount; $i++)
                {


                    $ImageName      = $_FILES['myfile']['name'][$i];
                    $ImageType      = $_FILES['myfile']['type'][$i]; //"image/png", image/jpeg etc.


                    $ret[$ImageName]= $output_dir.$ImageName;

                     if (is_dir($output_dir) && is_writable($output_dir)) {

                        move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$ImageName );
                    }
                    else {
                        echo 'Upload directory is  multi not writable, or does not exist.';
                    }
                }
            }
        }
        echo json_encode($ret);

    }

    //js code
    /*!
     * jQuery Upload File Plugin
     * version: 3.1.2
     * @requires jQuery v1.5 or later & form plugin
     * Copyright (c) 2013 Ravishanker Kusuma
     * http://hayageek.com/
     */
    (function(b) {
        if (b.fn.ajaxForm == undefined) {
            b.getScript("http://malsup.github.io/jquery.form.js")
        }
        var a = {};
        a.fileapi = b("<input type='file'/>").get(0).files !== undefined;
        a.formdata = window.FormData !== undefined;
        b.fn.uploadFile = function(t) {
            var r = b.extend({
                url: "",
                method: "POST",
                enctype: "multipart/form-data",
                formData: null,
                returnType: null,
                allowedTypes: "*",
                fileName: "file",
                formData: {},
                dynamicFormData: function() {
                    return {}
                },
                maxFileSize: -1,
                maxFileCount: -1,
                multiple: true,
                dragDrop: true,
                autoSubmit: true,
                showCancel: true,
                showAbort: true,
                showDone: true,
                showDelete: false,
                showError: true,
                showStatusAfterSuccess: true,
                showStatusAfterError: true,
                showFileCounter: true,
                fileCounterStyle: "). ",
                showProgress: false,
                onSelect: function(s) {
                    return true
                },
                onSubmit: function(s, u) {},
                onSuccess: function(u, s, v) {},
                onError: function(v, s, u) {},
                deleteCallback: false,
                afterUploadAll: false,
                uploadButtonClass: "upload",
                dragDropStr: "<span><b>Drag &amp; Drop Files</b></span>",
                abortStr: "Abort",
                cancelStr: "Cancel",
                deletelStr: "Delete",
                doneStr: "Done",
                multiDragErrorStr: "Multiple File Drag &amp; Drop is not allowed.",
                extErrorStr: "is not allowed. Allowed extensions: ",
                sizeErrorStr: "is not allowed. Allowed Max size: ",
                uploadErrorStr: "Upload is not allowed",
                maxFileCountErrorStr: " is not allowed. Maximum allowed files are:"
            }, t);
            this.fileCounter = 1;
            this.selectedFiles = 0;
            this.fCounter = 0;
            this.sCounter = 0;
            this.tCounter = 0;
            var d = "upload-" + (new Date().getTime());
            this.formGroup = d;
            this.hide();
            this.errorLog = b("<div></div>");
            this.after(this.errorLog);
            this.responses = [];
            if (!a.formdata) {
                r.dragDrop = false
            }
            if (!a.formdata) {
                r.multiple = false
            }
            var m = this;
            var e = b("<div>" + b(this).html() + "</div>");
            b(e).addClass(r.uploadButtonClass);
            (function k() {
                if (b.fn.ajaxForm) {
                    if (r.dragDrop) {
                        var s = b('<div class="ajax-upload-dragdrop" style="vertical-align:top;"></div>');
                        b(m).before(s);
                        b(s).append(e);
                        b(s).append(b(r.dragDropStr));
                        f(m, r, s)
                    } else {
                        b(m).before(e)
                    }
                    q(m, d, r, e)
                } else {
                    window.setTimeout(k, 10)
                }
            })();
            this.startUpload = function() {
                b("." + this.formGroup).each(function(u, s) {
                    if (b(this).is("form")) {
                        b(this).submit()
                    }
                })
            };
            this.stopUpload = function() {
                b(".upload-red").each(function(u, s) {
                    if (b(this).hasClass(m.formGroup)) {
                        b(this).click()
                    }
                })
            };
            this.getResponses = function() {
                return this.responses
            };
            var g = false;

            function j() {
                if (r.afterUploadAll && !g) {
                    g = true;
                    (function s() {
                        if (m.sCounter != 0 && (m.sCounter + m.fCounter == m.tCounter)) {
                            r.afterUploadAll(m);
                            g = false
                        } else {
                            window.setTimeout(s, 100)
                        }
                    })()
                }
            }

            function f(w, u, v) {
                v.on("dragenter", function(s) {
                    s.stopPropagation();
                    s.preventDefault();
                    b(this).css("border", "2px solid #000000")
                });
                v.on("dragover", function(s) {
                    s.stopPropagation();
                    s.preventDefault()
                });
                v.on("drop", function(x) {
                    b(this).css("border", "2px solid #000000");
                    x.preventDefault();
                    w.errorLog.html("");
                    var s = x.originalEvent.dataTransfer.files;
                    if (!u.multiple && s.length > 1) {
                        if (u.showError) {
                            b("<div style='color:red;'>" + u.multiDragErrorStr + "</div>").appendTo(w.errorLog)
                        }
                        return
                    }
                    if (u.onSelect(s) == false) {
                        return
                    }
                    l(u, w, s)
                });
                b(document).on("dragenter", function(s) {
                    s.stopPropagation();
                    s.preventDefault()
                });
                b(document).on("dragover", function(s) {
                    s.stopPropagation();
                    s.preventDefault();
                    v.css("border", "2px solid #000000")
                });
                b(document).on("drop", function(s) {
                    s.stopPropagation();
                    s.preventDefault();
                    v.css("border", "2px solid #000000")
                })
            }

            function i(s) {
                var v = "";
                var u = s / 1024;
                if (parseInt(u) > 1024) {
                    var w = u / 1024;
                    v = w.toFixed(2) + " MB"
                } else {
                    v = u.toFixed(2) + " KB"
                }
                return v
            }

            function o(x) {
                var y = [];
                if (jQuery.type(x) == "string") {
                    y = x.split("&")
                } else {
                    y = b.param(x).split("&")
                }
                var u = y.length;
                var s = [];
                var w, v;
                for (w = 0; w < u; w++) {
                    y[w] = y[w].replace(/\+/g, " ");
                    v = y[w].split("=");
                    s.push([decodeURIComponent(v[0]), decodeURIComponent(v[1])])
                }
                return s
            }

            function l(H, B, u) {
                for (var C = 0; C < u.length; C++) {
                    if (!c(B, H, u[C].name)) {
                        if (H.showError) {
                            b("<div style='color:red;'><b>" + u[C].name + "</b> " + H.extErrorStr + H.allowedTypes + "</div>").appendTo(B.errorLog)
                        }
                        continue
                    }
                    if (H.maxFileSize != -1 && u[C].size > H.maxFileSize) {
                        if (H.showError) {
                            b("<div style='color:red;'><b>" + u[C].name + "</b> " + H.sizeErrorStr + i(H.maxFileSize) + "</div>").appendTo(B.errorLog)
                        }
                        continue
                    }
                    if (H.maxFileCount != -1 && B.selectedFiles >= H.maxFileCount) {
                        if (H.showError) {
                            b("<div style='color:red;'><b>" + u[C].name + "</b> " + H.maxFileCountErrorStr + H.maxFileCount + "</div>").appendTo(B.errorLog)
                        }
                        continue
                    }
                    B.selectedFiles++;
                    var D = H;
                    var w = new FormData();
                    var A = H.fileName.replace("[]", "");
                    w.append(A, u[C]);
                    var y = H.formData;
                    if (y) {
                        var F = o(y);
                        for (var z = 0; z < F.length; z++) {
                            if (F[z]) {
                                w.append(F[z][0], F[z][1])
                            }
                        }
                    }
                    D.fileData = w;
                    var E = new p(B, H);
                    var G = "";
                    if (H.showFileCounter) {
                        G = B.fileCounter + H.fileCounterStyle + u[C].name
                    } else {
                        G = u[C].name
                    }
                    E.filename.html(G);
                    var v = b("<form style='display:block; position:absolute;left: 150px;' class='" + B.formGroup + "' method='" + H.method + "' action='" + H.url + "' enctype='" + H.enctype + "'></form>");
                    v.appendTo("body");
                    var x = [];
                    x.push(u[C].name);
                    n(v, D, E, x, B);
                    B.fileCounter++
                }
            }

            function c(w, v, y) {
                var x = v.allowedTypes.toLowerCase().split(",");
                var u = y.split(".").pop().toLowerCase();
                if (v.allowedTypes != "*" && jQuery.inArray(u, x) < 0) {
                    return false
                }
                return true
            }

            function h(u, w) {
                if (u.showFileCounter) {
                    var v = b(".upload-filename").length;
                    w.fileCounter = v + 1;
                    b(".upload-filename").each(function(A, y) {
                        var s = b(this).html().split(u.fileCounterStyle);
                        var x = parseInt(s[0]) - 1;
                        var z = v + u.fileCounterStyle + s[1];
                        b(this).html(z);
                        v--
                    })
                }
            }

            function q(y, B, D, u) {
                var A = "ajax-upload-id-" + (new Date().getTime());
                var w = b("<form method='" + D.method + "' action='" + D.url + "' enctype='" + D.enctype + "'></form>");
                var v = "<input type='file' id='" + A + "' name='" + D.fileName + "'/>";
                if (D.multiple) {
                    if (D.fileName.indexOf("[]") != D.fileName.length - 2) {
                        D.fileName += "[]"
                    }
                    v = "<input type='file' id='" + A + "' name='" + D.fileName + "' multiple/>"
                }
                var z = b(v).appendTo(w);
                z.change(function() {
                    y.errorLog.html("");
                    var K = D.allowedTypes.toLowerCase().split(",");
                    var G = [];
                    if (this.files) {
                        for (H = 0; H < this.files.length; H++) {
                            G.push(this.files[H].name)
                        }
                        if (D.onSelect(this.files) == false) {
                            return
                        }
                    } else {
                        var I = b(this).val();
                        var F = [];
                        G.push(I);
                        if (!c(y, D, I)) {
                            if (D.showError) {
                                b("<div style='color:red;'><b>" + I + "</b> " + D.extErrorStr + D.allowedTypes + "</div>").appendTo(y.errorLog)
                            }
                            return
                        }
                        F.push({
                            name: I,
                            size: "NA"
                        });
                        if (D.onSelect(F) == false) {
                            return
                        }
                    }
                    h(D, y);
                    u.unbind("click");
                    w.hide();
                    q(y, B, D, u);
                    w.addClass(B);
                    if (a.fileapi && a.formdata) {
                        w.removeClass(B);
                        var J = this.files;
                        l(D, y, J)
                    } else {
                        var E = "";
                        for (var H = 0; H < G.length; H++) {
                            if (D.showFileCounter) {
                                E += y.fileCounter + D.fileCounterStyle + G[H] + "<br>"
                            } else {
                                E += G[H] + "<br>"
                            }
                            y.fileCounter++
                        }
                        if (D.maxFileCount != -1 && (y.selectedFiles + G.length) > D.maxFileCount) {
                            if (D.showError) {
                                b("<div style='color:red;'><b>" + E + "</b> " + D.maxFileCountErrorStr + D.maxFileCount + "</div>").appendTo(y.errorLog)
                            }
                            return
                        }
                        y.selectedFiles += G.length;
                        var s = new p(y, D);
                        s.filename.html(E);
                        n(w, D, s, G, y)
                    }
                });
                w.css({
                    margin: 0,
                    padding: 0
                });
                var C = b(u).width() + 10;
                if (C == 10) {
                    C = 120
                }
                var x = u.height() + 10;
                if (x == 10) {
                    x = 35
                }
                u.css({
                    position: "relative",
                    overflow: "hidden",
                    cursor: "default"
                });
                z.css({
                    position: "absolute",
                    cursor: "pointer",
                    top: "0px",
                    width: C,
                    height: x,
                    left: "0px",
                    "z-index": "100",
                    opacity: "0.0",
                    filter: "alpha(opacity=0)",
                    "-ms-filter": "alpha(opacity=0)",
                    "-khtml-opacity": "0.0",
                    "-moz-opacity": "0.0"
                });
                w.appendTo(u)
            }

            function p(v, u) {
                //console.log(this);
                this.statusbar = b("<div class='upload-statusbar'></div>");
                this.filename = b("<div class='upload-filename'></div>").appendTo(this.statusbar);
                this.progressDiv = b("<div class='upload-progress'>").appendTo(this.statusbar).hide();
                this.progressbar = b("<div class='upload-bar " + v.formGroup + "'></div>").appendTo(this.progressDiv);
                this.abort = b("<div class='upload-red " + v.formGroup + "'>" + u.abortStr + "</div>").appendTo(this.statusbar).hide();
                this.cancel = b("<div class='upload-red'>" + u.cancelStr + "</div>").appendTo(this.statusbar).hide();
                this.done = b("<div class='upload-green'>" + u.doneStr + "</div>").appendTo(this.statusbar).hide();
                this.del = b("<div class='upload-red'>" + u.deletelStr + "</div>").appendTo(this.statusbar).hide();
                v.errorLog.after(this.statusbar);
                return this
            }

            function n(z, y, u, w, A) {
                var x = null;
                var v = {
                    cache: false,
                    contentType: false,
                    processData: false,
                    forceSync: false,
                    data: y.formData,
                    formData: y.fileData,
                    dataType: y.returnType,
                    beforeSubmit: function(F, C, E) {
                        if (y.onSubmit.call(this, w) != false) {
                            var B = y.dynamicFormData();
                            if (B) {
                                var s = o(B);
                                if (s) {
                                    for (var D = 0; D < s.length; D++) {
                                        if (s[D]) {
                                            if (y.fileData != undefined) {
                                                E.formData.append(s[D][0], s[D][1])
                                            } else {
                                                E.data[s[D][0]] = s[D][1]
                                            }
                                        }
                                    }
                                }
                            }
                            A.tCounter += w.length;
                            j();
                            return true
                        }
                        u.statusbar.append("<div style='color:red;'>" + y.uploadErrorStr + "</div>");
                        u.cancel.show();
                        z.remove();
                        u.cancel.click(function() {
                            u.statusbar.remove()
                        });
                        return false
                    },
                    beforeSend: function(B, s) {
                        u.progressDiv.show();
                        u.cancel.hide();
                        u.done.hide();
                        if (y.showAbort) {
                            u.abort.show();
                            u.abort.click(function() {
                                B.abort();
                                A.selectedFiles -= w.length
                            })
                        }
                        if (!a.formdata) {
                            u.progressbar.width("5%")
                        } else {
                            u.progressbar.width("1%")
                        }
                    },
                    uploadProgress: function(E, s, D, C) {
                        if (C > 98) {
                            C = 98
                        }
                        var B = C + "%";
                        if (C > 1) {
                            u.progressbar.width(B)
                        }
                        if (y.showProgress) {
                            u.progressbar.html(B);
                            u.progressbar.css("text-align", "center")
                        }
                    },
                    success: function(B, s, C) {
                        A.responses.push(B);
                        u.progressbar.width("100%");
                        if (y.showProgress) {
                            u.progressbar.html("100%");
                            u.progressbar.css("text-align", "center")
                        }
                        u.abort.hide();
                        y.onSuccess.call(this, w, B, C);
                        if (y.showStatusAfterSuccess) {
                            if (y.showDone) {
                                u.done.show();
                                u.done.click(function() {
                                    u.statusbar.hide("slow");
                                    u.statusbar.remove()
                                })
                            } else {
                                u.done.hide()
                            }
                            if (y.showDelete) {
                                u.del.show();
                                u.del.click(function() {
                                    u.statusbar.hide().remove();
                                    if (y.deleteCallback) {
                                        y.deleteCallback.call(this, B, u)
                                    }
                                    A.selectedFiles -= w.length;
                                    h(y, A)
                                })
                            } else {
                                u.del.hide()
                            }
                        } else {
                            u.statusbar.hide("slow");
                            u.statusbar.remove()
                        }
                        z.remove();
                        A.sCounter += w.length
                    },
                    error: function(C, s, B) {
                        u.abort.hide();
                        if (C.statusText == "abort") {
                            u.statusbar.hide("slow").remove();
                            h(y, A)
                        } else {
                            y.onError.call(this, w, s, B);
                            if (y.showStatusAfterError) {
                                u.progressDiv.hide();
                                u.statusbar.append("<span style='color:red;'>ERROR: " + B + "</span>")
                            } else {
                                u.statusbar.hide();
                                u.statusbar.remove()
                            }
                            A.selectedFiles -= w.length
                        }
                        z.remove();
                        A.fCounter += w.length
                    }
                };
                if (y.autoSubmit) {
                    z.ajaxSubmit(v)
                } else {
                    if (y.showCancel) {
                        u.cancel.show();
                        u.cancel.click(function() {
                            z.remove();
                            u.statusbar.remove();
                            A.selectedFiles -= w.length;
                            h(y, A)
                        })
                    }
                    z.ajaxForm(v)
                }
            }
            return this
        }
    }(jQuery));