jQuery File UPload 包含多个带有进度条的文件上传，能够兼容任意的服务端语言，例如 PHP、Python、Ruby on Rails、Java等，支持标准的HTML表单文件上传。jQuery 文件上传插件依赖于Ajax表单插件，所以 github 地址上包含有和没有表单插件的源代码。

快速入门

1、引入 CSS 和 JavaScript 文件

2、为文件添加一个 DIV 来处理文件上传

Upload

3、在网页加载完毕以后初始化插件

$(document).ready(function(){

$("#fileuploader").uploadFile({

url:"YOUR_FILE_UPLOAD_URL",

fileName:"myfile"

});

});

就是这样 JQuery AJAX File Uploader 已经准备好了。

插件特点

jQuery File upload 插件具有以下特点。

1).单文件上传

使用下面的配置，插件只允许单个文件上传(不拖拽)。

$("#singleupload").uploadFile({

url:"upload.php",

multiple:false,

dragDrop:false,

maxFileCount:1,

fileName:"myfile"

});

2).多文件上传(拖放)

通过下面的配置，插件支持多文件上传与拖放。

$("#multipleupload").uploadFile({

url:"upload.php",

multiple:true,

dragDrop:true,

fileName:"myfile"

});

3).Sequential file Upload

With the below configuration, plugin uploads the file sequentially. you can control number of active uploads with sequentialCount.

Source:

$("#sequentialupload").uploadFile({

url:"upload.php",

fileName:"myfile",

sequential:true,

sequentialCount:1

});

4).Upload with File Restrictions

With the below configuration, plugin allows only specific file types.

Source:

$("#restrictupload1").uploadFile({

url:"upload.php",

fileName:"myfile",

acceptFiles:"image/*"

});

With the below configuration, plugin allows only files lesser than the specified size/count.

$("#restrictupload2").uploadFile({

url:"upload.php",

fileName:"myfile",

maxFileCount:3,

maxFileSize:100*1024

});

5).Localization

With the below configuration, you can change all the plugin strings.

$("#localupload").uploadFile({

url:"upload.php",

fileName:"myfile",

dragDropStr: "Faites glisser et déposez les fichiers", abortStr:"abandonner",

cancelStr:"résilier",

doneStr:"fait",

multiDragErrorStr: "Plusieurs Drag & Drop de fichiers ne sont pas autorisés.",

extErrorStr:"n'est pas autorisé. Extensions autorisées:",

sizeErrorStr:"n'est pas autorisé. Admis taille max:",

uploadErrorStr:"Upload n'est pas autorisé",

uploadStr:"Téléchargez"

});

6).Sending Form Data

With the below configuration, plugin sends the form data with every file uploaded. form data can be accessed at server side using $_POST.

Source:

$("#formdata1").uploadFile({

url:"upload.php",

fileName:"myfile",

formData: {"name":"Ravi","age":31}

});

With the below configuration, plugin sends dynamic form data with every file upload. For example, if you want to send updated ‘input’ value with the uploaded file.

Source:

$("#formdata2").uploadFile({

url:"upload.php",

fileName:"myfile",

dynamicFormData: function(){

var data ={ location:"INDIA"}

return data;

}

});

7).Add extra HTML Elements

With the below configuration,plugin allows to add extra HTML elements (input,textarea,select) to status bar.

Source:

var extraObj = $("#extraupload").uploadFile({

url:"upload.php",

fileName:"myfile",

extraHTML:function(){

var html = "

File Tags:
";

html += "Category:ONETWO";

html += "

";

return html;

},

autoSubmit:false

});

$("#extrabutton").click(function(){

extraObj.startUpload();

});

8).Custom UI

Using the below configuration, you can design your own progress bar.

Source:

var count=0;

$("#customupload1").uploadFile({

url:"upload.php",

fileName:"myfile",

showFileCounter:false,

customProgressBar: function(obj,s){

this.statusbar = $("

this.preview = $("").width(s.previewWidth).height(s.previewHeight).appendTo(this.statusbar).hide();

this.filename = $("

this.progressDiv = $("

").appendTo(this.statusbar).hide();

this.progressbar = $("

this.abort = $("

" + s.abortStr + "

").appendTo(this.statusbar).hide();

this.cancel = $("

" + s.cancelStr + "

").appendTo(this.statusbar).hide();

this.done = $("

" + s.doneStr + "

").appendTo(this.statusbar).hide();

this.download = $("

" + s.downloadStr + "

").appendTo(this.statusbar).hide();

this.del = $("

" + s.deleteStr + "

").appendTo(this.statusbar).hide();

this.abort.addClass("custom-red");

this.done.addClass("custom-green");

this.download.addClass("custom-green");

this.cancel.addClass("custom-red");

this.del.addClass("custom-red");

if(count++ %2 ==0)

this.statusbar.addClass("even");

else

this.statusbar.addClass("odd");

return this;

}

});

9).Upload Events

Below are the different callback events. Source:

$("#eventsupload").uploadFile({

url:"upload.php",

multiple:true,

fileName:"myfile",

returnType:"json",

onLoad:function(obj){

$("#eventsmessage").html($("#eventsmessage").html()+"
Widget Loaded:");

},

onSubmit:function(files){

$("#eventsmessage").html($("#eventsmessage").html()+"
Submitting:"+JSON.stringify(files));

//return false;

},

onSuccess:function(files,data,xhr,pd){

$("#eventsmessage").html($("#eventsmessage").html()+"
Success for: "+JSON.stringify(data));

},

afterUploadAll:function(obj){

$("#eventsmessage").html($("#eventsmessage").html()+"
All files are uploaded");

},

onError: function(files,status,errMsg,pd){

$("#eventsmessage").html($("#eventsmessage").html()+"
Error for: "+JSON.stringify(files));

},

onCancel:function(files,pd){

$("#eventsmessage").html($("#eventsmessage").html()+"
Canceled files: "+JSON.stringify(files));

}

});

10).Delete/Download Files

With the below configuration, plugin supports File download and File delete features. Source:

$("#deleteupload").uploadFile({url: "upload.php",

dragDrop: true,

fileName: "myfile",

returnType: "json",

showDelete: true,

showDownload:true,

statusBarWidth:600,

dragdropWidth:600,

deleteCallback: function (data, pd) {

for (var i = 0; i < data.length; i++) {

$.post("delete.php", {op: "delete",name: data[i]}, function (resp,textStatus, jqXHR){

//Show Message

alert("File Deleted");

});

}

pd.statusbar.hide(); //You choice.

},

downloadCallback:function(filename,pd){

location.href="download.php?filename="+filename;

}

});

11).Image Preview

To enable image preview, use the below configuration. Source:

$("#previewupload").uploadFile({

url:"upload.php",

fileName:"myfile",

acceptFiles:"image/*",

showPreview:true,

previewHeight: "100px",

previewWidth: "100px",

});

12).Show already uploaded files

With the below configuration,plugin loads the previousily uploaded files. Source:

$("#showoldupload").uploadFile({url: "upload.php",

dragDrop: true,

fileName: "myfile",

returnType: "json",

showDelete: true,

showDownload:true,

statusBarWidth:600,

dragdropWidth:600,

maxFileSize:200*1024,

showPreview:true,

previewHeight: "100px",

previewWidth: "100px",

onLoad:function(obj){

$.ajax({

cache: false,

url: "load.php",

dataType: "json",

success: function(data){

for(var i=0;i

obj.createProgress(data[i]["name"],data[i]["path"],data[i]["size"]);

}

}

});

},

deleteCallback: function (data, pd) {

for (var i = 0; i < data.length; i++) {

$.post("delete.php", {op: "delete",name: data[i]},

function (resp,textStatus, jqXHR) {

//Show Message

alert("File Deleted");

});

}

pd.statusbar.hide(); //You choice.

},

downloadCallback:function(filename,pd){

location.href="download.php?filename="+filename;

}

});

Jquery File Upload

$("#singleupload1").uploadFile({

url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php"

});

Jquery File Upload with File Restrictions

$("#singleupload2").uploadFile({

url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",

allowedTypes:"png,gif,jpg,jpeg",

fileName:"myfile"

});

Jquery Advanced File Upload

var uploadObj = $("#advancedUpload").uploadFile({

url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",

multiple:true,

autoSubmit:false,

fileName:"myfile",

formData: {"name":"Ravi","age":31},

maxFileSize:1024*100,

maxFileCount:1,

dynamicFormData: function(){

var data ={ location:"INDIA"}

return data;

},

showStatusAfterSuccess:false,

dragDropStr: "Faites glisser et déposez les fichiers",

abortStr:"abandonner",

cancelStr:"résilier",

doneStr:"fait",

multiDragErrorStr: "Plusieurs Drag & Drop de fichiers ne sont pas autorisés.",

extErrorStr:"n'est pas autorisé. Extensions autorisées:",

sizeErrorStr:"n'est pas autorisé. Admis taille max:",

uploadErrorStr:"Upload n'est pas autorisé"

});

$("#startUpload").click(function(){

uploadObj.startUpload();

});

Jquery Delete File Option

$("#deleteFileUpload").uploadFile({

url: "upload.php",

dragDrop: true,

fileName: "myfile",

returnType: "json",

showDelete: true,

deleteCallback: function (data, pd) {

for (var i = 0; i < data.length; i++) {

$.post("delete.php", {op: "delete",name: data[i]},

function (resp,textStatus, jqXHR) {

//Show Message

alert("File Deleted");

});

}

pd.statusbar.hide(); //You choice.

}

});

Jquery Multiple File Upload

$("#multipleupload").uploadFile({

url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",

multiple:true,

fileName:"myfile"

});

Jquery Upload File Events

$("#eventsupload").uploadFile({

url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",

multiple:true,

fileName:"myfile",

onSubmit:function(files){

$("#eventsmessage").html($("#eventsmessage").html()+"
Submitting:"+JSON.stringify(files));

},

onSuccess:function(files,data,xhr){

$("#eventsmessage").html($("#eventsmessage").html()+"
Success for: "+JSON.stringify(data));

},

afterUploadAll:function(){

$("#eventsmessage").html($("#eventsmessage").html()+"
All files are uploaded");

},

onError: function(files,status,errMsg){

$("#eventsmessage").html($("#eventsmessage").html()+"
Error for: "+JSON.stringify(files));

}

});

Hide Cancel,Abort,Done Buttons

$("#stylingupload1").uploadFile({

url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",

multiple:true,

fileName:"myfile",

showStatusAfterSuccess:false,

showAbort:false,

showDone:false,

});

Changing Upload Button style

$("#stylingupload2").uploadFile({

url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",

multiple:true,

fileName:"myfile",

showStatusAfterSuccess:false,

showAbort:false,

showDone:false,

uploadButtonClass:"ajax-file-upload-green"

});

方法事件

uploadFile( options )

Creates Ajax form and uploads the files to server.

var uploadObj = $("#uploadDivId").uploadFile(options);

startUpload()

uploads all the selected files. This function is used when autoSubmit option is set to false.

uploadObj.startUpload();

stopUpload()

Aborts all the uploads

uploadObj.stopUpload();

cancelAll()

Cancel all the selected files ( when autoSubmit:false)

uploadObj.cancelAll();

remove()

remove the widget from the document.

uploadObj.remove();

reset()

resets the widget properities

uploadObj.reset();

uploadObj.reset(false);//if you dont want remove the existing progress bars

getResponses()

Responses from the server are collected and returned.

uploadObj.getResponses()

可选参数

url

Server URL which handles File uploads

method

Upload Form method type POST or GET. Default is POST

enctype

Upload Form enctype. Default is multipart/form-data.

formData

An object that should be send with file upload.

formData: { key1: 'value1', key2: 'value2' }

dynamicFormData

To provide form data dynamically

dynamicFormData: function(){

//var data ="XYZ=1&ABCD=2";

var data ={"XYZ":1,"ABCD":2};

return data;

}

extraHTML

You can extra div elements to each statusbar. This is useful only when you set autoSubmit to false.

extraHTML:function(){

var html = "

File tags:
";

html += "Directory:ONETWO";

html += "

";

return html;

}

customProgressBar

Using this you can add your own custom progress bar.

customProgressBar: function(obj,s){

this.statusbar = $("

this.preview = $("").width(s.previewWidth).height(s.previewHeight).appendTo(this.statusbar).hide();

this.filename = $("

this.progressDiv = $("

").appendTo(this.statusbar).hide();

this.progressbar = $("

this.abort = $("

" + s.abortStr + "

").appendTo(this.statusbar).hide();

this.cancel = $("

" + s.cancelStr + "

").appendTo(this.statusbar).hide();

this.done = $("

" + s.doneStr + "

").appendTo(this.statusbar).hide();

this.download = $("

" + s.downloadStr + "

").appendTo(this.statusbar).hide();

this.del = $("

" + s.deleteStr + "

").appendTo(this.statusbar).hide();

this.abort.addClass("ajax-file-upload-red");

this.done.addClass("ajax-file-upload-green");

this.download.addClass("ajax-file-upload-green");

this.cancel.addClass("ajax-file-upload-red");

this.del.addClass("ajax-file-upload-red");

if(count++ %2 ==0)

this.statusbar.addClass("even");

else

this.statusbar.addClass("odd");

return this;

}

sequential

Enables sequential upload. You can limit the number of uploads by sequentialCount

sequential:true,

sequentialCount:1

With the above configuration, only one file is uploaded at a time.

maxFileSize

Allowed Maximum file Size in bytes.

maxFileCount

Allowed Maximum number of files to be uploaded

returnType

Expected data type of the response. One of: null, ‘xml’, ‘script’, or ‘json’. The dataType option provides a means for specifying how the server response should be handled. This maps directly to jQuery’s dataType method. The following values are supported:

‘xml’: server response is treated as XML and the ‘success’ callback method, if specified, will be passed the responseXML value

‘json’: server response will be evaluted and passed to the ‘success’ callback, if specified

‘script’: server response is evaluated in the global context

allowedTypes

List of comma separated file extensions: Default is "*". Example: "jpg,png,gif"

acceptFiles

accept MIME type for file browse dialog. Default is "". Example: "image/"

check this for full list : http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv

fileName

Name of the file input field. Default is file

multiple

If it is set to true, multiple file selection is allowed. Default isfalse

dragDrop

Drag drop is enabled if it is set to true

autoSubmit

If it is set to true, files are uploaded automatically. Otherwise you need to call .startUpload function. Default istrue

showCancel

If it is set to false, Cancel button is hidden when autoSubmit is false. Default istrue

showAbort

If it is set to false, Abort button is hidden when the upload is in progress. Default istrue

showDone

If it is set to false, Done button is hidden when the upload is completed. Default istrue

showDelete

If it is set to true, Delete button is shown when the upload is completed. Default isfalse,You need to implement deleteCallback() function.

showDownload

If it is set to true, Download button is shown when the upload is completed. Default isfalse,You need to implement downloadCallback() function.

showStatusAfterSuccess

If it is set to false, status box will be hidden after the upload is done. Default istrue

showError

If it is set to false, Errors are not shown to user. Default istrue

showFileCounter

If it is set to true, File counter is shown with name. Default istrue File Counter style can be changed using fileCounterStyle. Default is ).

showProgress

If it is set to true, Progress precent is shown to user. Default isfalse

showFileSize

If it is set to true, File size is shown

showPreview

If it is set to true, preview is shown to images. Default isfalse

previewHeight

is used to set preview height. Default is : “auto”

previewWidth

is used to set preview width. Default :”100%”

showQueueDiv

Using this you can place the progressbar wherever you want.

showQueueDiv: "output"

progress bar is added to a div with id output

statusBarWidth

Using this you can set status bar width

dragdropWidth

Using this you can set drag and drop div width

update

update plugin options runtime.

uploadObj.update({autoSubmit:true,maxFileCount:3,showDownload:false});

Callbacks

onLoad

callback back to be invoked when the plugin is initialized. This can be used to show existing files..

onLoad:function(obj) {

$.ajax({

cache: false,

url: "load.php",

dataType: "json",

success: function(data)

{

for(var i=0;i

{

obj.createProgress(data[i]);

}

}

});

},

onSelect

callback back to be invoked when the file selected.

onSelect:function(files){

files[0].name;

files[0].size;

return true; //to allow file submission.

}

onSubmit

callback back to be invoked before the file upload.

onSubmit:function(files){

//files : List of files to be uploaded

//return flase; to stop upload

}

onSuccess

callback to be invoked when the upload is successful.

onSuccess:function(files,data,xhr,pd){

//files: list of files

//data: response from server

//xhr : jquer xhr object

}

afterUploadAll

callback to be invoked when all the files are uploaded.

afterUploadAll:function(obj){

//You can get data of the plugin using obj

}

onError

callback to be invoked when the upload is failed.

onError: function(files,status,errMsg,pd){

//files: list of files

//status: error status

//errMsg: error message

}

onCancel

callback to be invoked when user cancel the file ( when autosubmit:false)

onCancel: function(files,pd){

//files: list of files

//pd: progress div

}

deleteCallback

callback to be invoked when the user clicks on Delete button.

deleteCallback: function(data,pd){

for(var i=0;i

$.post("delete.php",{op:"delete",name:data[i]},

function(resp, textStatus, jqXHR) {

//Show Message

alert("File Deleted");

});

}

pd.statusbar.hide(); //You choice to hide/not.

}

downloadCallback

callback to be invoked when the user clicks on Download button.

downloadCallback:function(files,pd){

location.href="download.php?filename="+files[0];

}

Localisation

dragDropStr

Drag & Drop text. Default value: "Drag & Drop Files"

uploadStr

Upload button text. Default value: "Upload"

abortStr

Abort button text Default Value: "Abort"

cancelStr

Cancel button text. Default value: "Cancel"

doneStr

Done button text. Default value: "Done"

multiDragErrorStr

Default value: "Multiple File Drag & Drop is not allowed."

extErrorStr

Default value: "is not allowed. Allowed extensions: "

duplicateErrorStr

Default value: "is not allowed. File already exists."

sizeErrorStr

Default value: "is not allowed. Allowed Max size: "

uploadErrorStr

Default value: "Upload is not allowed"

maxFileCountErrorStr

Default value: " is not allowed. Maximum allowed files are:"

Custom Errors

you can send custom errors from server. like “File exists”. for custom errors,expected json object from server is:

{"jquery-upload-file-error":"File already exists"}

Note: You have to set returnType: "json"

PHP Files

Server settings for Large file uploads

php.ini settings

max_file_uploads = 2000

upload_max_filesize = 40000M

max_input_vars = 10000

post_max_size = 40000M

httpd.conf settings

php_value suhosin.post.max_vars 10000

php_value suhosin.request.max_vars 10000

php_value suhosin.get.max_array_depth 2000

php_value suhosin.get.max_vars 10000

php_value suhosin.upload.max_uploads 2000

java ajax多文件上传插件_jQuery Upload File 多文件批量上传插件 - 资源相关推荐

  1. JCK Editor 结合jQuery Upload File 增加图片批量上传功能

    项目需准备文件: jQuery File Upload 上传插件,下载地址:https://github.com/JennerZhang/jQuery-File-Upload Joomla JFUpl ...

  2. c#MVC文件（图片，word,excel,zip等）批量上传

    最近一直研究文件批量上传,功夫不负有心人终于解决了. 该文件上传使用队里的新式,实现了文件批量上传. 首先看一下我前端的处理操作 @{Layout = ""; }<!DOCT ...

  3. js插件+UploadFile类实现图片的批量上传

    文件上传无疑是web应用中一个非常常用的功能,下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传. 首先,给大家介绍展示一下具体操作页面: h ...

  4. php图片批量上传插件下载,jQuery的多图片批量上传插件

    jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...

  5. vue - element ＜upload＞ 组件批量上传文档，可携带其他表单数据项一同与文件 “手动提交“ 服务器（类似百度文库系统批量上传前端界面与逻辑）超详细教程示例源码，提供界面与逻辑完整源码

    效果图 本示例使用的是 element 组件库,其实什么组件库都行(逻辑是一样),只要你是 vue.js 项目就能使用本教程. 本文实现了 vue + element 使用 upload 组件批量上传 ...

  6. 基于Layui上传组件（upload）的动态增加上传组件并使得每个上传组件都可独立上传

    演示基于laravel框架 1.编写html元素(可根据实际需求进行编写) 2.引入layui相关css,js 3.编写upload组件实例化公共调用方法,首次加载页面需要初始化,因此需要调用uplo ...

  7. 手机上传文件到ftp服务器,上传文件到iPhone上的FTP服务器(Upload File to FTP Server on i...

    我使用PHP页面的文件发布到并有PHP处理上传.... 此代码是用来上传一张照片,但它可以适应任何文件的工作. PHP代码: $uploaddir = 'photos/'; $file = basen ...

  8. html读取url中文件,HTML5基础知识 - JavaScript API - File - 读取文件为DataURL

    JavaScript 语言: JaveScriptBabelCoffeeScript 确定 // Content section used alot var content = document.ge ...

  9. vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...

    1. 前言 之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...

最新文章

  1. 英国JIC院士组3.8万英镑招博后-植物代谢物与微生物组-截止6月27日
  2. 【剑指offer-Java版】17合并两个排序链表
  3. 三个球数求最大值c语言,C语言中一个简单的球3个数最大数的程序中，最后一步：printf(apos;apos;max=%d\napos;apos;,max);怎么理解...
  4. BouncyCastle - Java加密与安全
  5. 【大会】海量高清视频服务端架构设计的变与不变
  6. HDOJ 1019 Least Common Multiple （数论）
  7. FFmpeg总结（二）AV系列结构体之AVFrame
  8. Oracle中文简繁体转换函数
  9. WPA无线密码破解利器EWSA/跑包软件
  10. python函数的调用方式_Python中函数参数调用方式分析
  11. 用python爬取之后发现果然如此，都说知乎的小姐姐漂亮
  12. img图片在父元素中居中的方法
  13. 【bzoj4200】[Noi2015]小园丁与老司机 dp+有上下界的网络流
  14. java方法集：大写金额转换数字
  15. Offset commit failed with a retriable exception. You should retry committing the latest consumed off
  16. 洞悉人性的职场沟通技术
  17. java exls_java excel类
  18. HTML5与移动端web学习笔记
  19. 播放mp4视频，有声音无图像，AVC(H264)编码转换
  20. php sqlite3菜鸟,SQLite 创建数据库 | 菜鸟教程

热门文章

  1. 来珠海的第一次煮粥，干贝+蘑菇+虾
  2. 陈迋西终于顶不住压力于北京时间3.28下午4：36跳楼身亡！详闻请看
  3. Oracle实例与数据库的概念详细解释
  4. 编译器扩展-ScriptableWizard
  5. 一头小牛,小牛成长到第四年开始，会每年生一头小牛，N年后共有多少头牛
  6. Json与CJson详解
  7. 通过短信验证码修改密码
  8. 面向对象实现原神抽卡模拟功能
  9. 淘宝层级改版，五力模型上线！
  10. Wonderware-InTouch历史报警、操作记录导出为Excel