详解jQuery uploadify文件上传插件的使用方法
uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。
现在最新版为3.2.1。
在线实例
实例中用到的php文件UploaderDemo.php请在页面下方下载
引入文件
- <linkrel="stylesheet"type="text/css"href="uploadify.css"/>
- <scripttype="text/javascript"src="jquery.min.js"></script>
- <scripttype="text/javascript"src="jquery.uploadify.js"></script>
使用方法
<form> <divid="queue"></div> <inputid="file_upload"name="file_upload"type="file"multiple="true"> </form> <divid="uploadfiles"></div> <divid="fileQueue"style="clear:both"></div> <scripttype="text/javascript"> vartimestamp=newDate().getTime(); vartoken=Math.floor(Math.random()*1000)+timestamp; $(function(){ $('#file_upload').uploadify({ 'buttonText':'选择文件..', 'fileObjName':'simplefile', 'method':'post', 'multi':true, 'queueID':'fileQueue', //'uploadLimit':2, 'fileTypeExts':'*.gif;*.png;*.jpg;*.bmp;*.jpeg;', 'buttonImage':'/static/js/uploadify/select.png', 'formData':{ 'timestamp':timestamp, 'token':token }, 'swf':'/static/js/uploadify/uploadify.swf', 'uploader':'/static/php/UploaderDemo.php', 'onUploadStart':function(){ $imgHtml='<imgclass="upload_load"src="/static/images/upload.gif"align="absmiddle"/>'; $('#uploadfiles').append($imgHtml); }, 'onUploadSuccess':function(file,data,response){ $('.upload_load').remove(); varjson=$.parseJSON(data); if(json.state=='success'){ $imgHtml='<spanid="file_'+json.file_id+'">'; $imgHtml+='<ahref="'+json.file+'"target="_blank">'; $imgHtml+='<imgsrc="'+json.file+'"width="100"height="100"align="absmiddle"/>'; $imgHtml+='</a>'; $imgHtml+='<ahref="javascript:uploadifyRemove("'+json.file+'")">删除</a>'; $imgHtml+='</span>'; $($imgHtml).appendTo('#uploadfiles'); }else{ alert(json.message); } }, 'onQueueComplete':function(){ $('.upload_load').remove(); } }); }); </script>
参数说明
instanceID–Uploadify实例的ID
fileID–列队中此文件的ID,或者理解为此任务的ID
fileName–文件的名称
fileSize–当前上传文件的大小
插入模版标签时使用格式如:${fileName}
注意此项并非最大文件上传数量,如果要限制最大上传文件数量,应设置uploadLimit。