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上传操作汇总》,进行深入学习和研究。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。