详解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。