如何使用fileupload.js上传多个文件？
16lz
2021-01-22
!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);
I am using this js for upload file. with it i can upload and preview only one file but i want to upload multiple file with preview anyone can help me to make it for multiple file upload . i wanna upload multiple file within a time with preview. see this example.
我正在使用这个js上传文件。有了它我可以上传和预览只有一个文件，但我想上传多个文件与预览任何人都可以帮助我进行多个文件上传。我想通过预览在一段时间内上传多个文件。看这个例子。
1 个解决方案
#1
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 & Drop Files</b></span>",
abortStr: "Abort",
cancelStr: "Cancel",
deletelStr: "Delete",
doneStr: "Done",
multiDragErrorStr: "Multiple File Drag & 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));
更多相关文章
- 文件上传js打开文件管理器过滤只显示指定类型文件的实现
- 如何配置访问WAS部署中的html文件
- word和.txt文件转html 及pdf文件， 使用poi jsoup itext心得
- HTML+jQuery图片上传示例
- 把html 文件放在cgi-bin下遇到问题
- CSS文件:SyntaxError:期望表达式，得到'。
- sp_send_dbmail在body中嵌入mhtml文件
- HTML中上传与读取图片或文件（input file）----在路上（25）
- 如何在刀片服务器的foreach循环中插入表行。在laravel 5.2中的ph