ajax 多图上传怎么写,jqueryajax多图上传显示怎么写

首先我们在页面上放置个上传按钮，使用POST提交到ajax。php。#ul_pics用来显示上传完毕后的图片。上传图片最大500KB，支持jpg，gif，png格式。接着，加载jQuery。js和plupload。full。min。js插件。

当点击按钮“上传图片”后，弹出选择文件对话框，按"ctrl"选择多图片上传。然后调用uploader。start()方法，开始上传。上传中间过程我们可以用UploadProgress方法来显示文件进度，最后通过FileUploaded来显示对应的图片。

通过浏览器控制台，会发现上传一张图片，会向后台ajax。php请求一次。varuploader=newplupload。Uploader({//创建实例的构造方法runtimes:'html5,flash,silverlight,html4',//上传插件初始化选用那种方式的优先级顺序browse_button:'btn',//上传按钮url:"ajax。

php",//远程上传地址flash_swf_url:'plupload/Moxie。swf',//flash文件地址silverlight_xap_url:'plupload/Moxie。xap',//silverlight文件地址filters:{max_file_size:'500kb',//最大上传文件大小(格式100b,10kb,10mb,1gb)mime_types:[//允许文件上传类型{title:"files",extensions:"jpg,png,gif"}]},multi_selection:true,//true:ctrl多文件上传,false单文件上传init:{FilesAdded:function(up,files){//文件上传前if($("#ul_pics")。

children("li")。length>30){alert("您上传的图片太多了！");uploader。destroy();}else{varli='';plupload。each(files,function(file){//遍历文件li+="0%";});$("#ul_pics")。

append(li);uploader。start();}},UploadProgress:function(up,file){//上传中，显示进度条$("#"+file。id)。find('。bar')。css({"width":file。

percent+"%"})。find("。percent")。text(file。percent+"%");},FileUploaded:function(up,file,info){//文件上传成功的时候触发vardata=JSON。parse(info。

response);$("#"+file。id)。html(""+data。name+"");},Error:function(up,err){//上传出错的时候触发alert(err。message);}}});uploader。init();。

全部