jquery插件uploadify多图上传功能实现代码
本文实例为大家分享了uploadify多图上传具体实现代码,可动态添加上传框,供大家参考,具体内容如下
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>UploadiFiveTest</title>
<scriptsrc="jquery2.js"type="text/javascript"></script>
<scriptsrc="jquery.uploadify.min.js"type="text/javascript"></script>
<linkrel="stylesheet"type="text/css"href="uploadify.css">
<styletype="text/css">
body{
font:13pxArial,Helvetica,Sans-serif;
}
</style>
</head>
<body>
<h1>UploadifyDemo</h1>
<divclass='upload'>
<form>
<divclass='form_file'>
<divclass='file'>
<inputid="file_upload1"name="file_upload"type="file"multiple="true">
</div>
</div>
</form>
</div>
<ahref="javascript:;"class="clickUpload">点击</a>
<scripttype="text/javascript">
<?php$timestamp=time();?>
$(function(){
vari=2;
$('.clickUpload').click(function(){
varhtml='';
html+='<divclass="file"><inputid="file_upload'+i+'"name="file_upload"type="file"multiple="true"></div>';
$('.form_file').append(html);
$('#file_upload'+i).uploadify({
'formData':{
'timestamp':'<?phpecho$timestamp;?>',
'token':'<?phpechomd5('unique_salt'.$timestamp);?>'
},
'swf':'uploadify.swf',
'uploader':'uploadify.php',
'width':'120',
'fileTypeExts':'*.gif;*.jpg;*.png',
'buttonText':'上传图片',
'removeCompleted':false,
'multi':true,//允许多图上传
//上传成功后执行
'onUploadSuccess':function(file,data,response){
$('#'+file.id).find('.data').html('上传完毕');
}
});
i++;
})
$('#file_upload1').uploadify({
'formData':{
'timestamp':'<?phpecho$timestamp;?>',
'token':'<?phpechomd5('unique_salt'.$timestamp);?>'
},
'swf':'uploadify.swf',
'uploader':'uploadify.php',
'width':'120',
'fileTypeExts':'*.gif;*.jpg;*.png',
'buttonText':'上传图片',
'removeCompleted':false,
'multi':true,//允许多图上传
//上传成功后执行
'onUploadSuccess':function(file,data,response){
$('#'+file.id).find('.data').html('上传完毕');
}
});
});
</script>
</body>
</html>
更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。