详解jQuery uploadify文件上传插件的使用方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解jQuery uploadify文件上传插件的使用方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8130字，纯文字阅读大概需要12分钟。

内容图文

uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程上传的功能。

现在最新版为3.2.1。

在线实例

实例中用到的php文件UploaderDemo.php请在页面下方下载

引入文件

• <link rel="stylesheet" type="text/css" href="uploadify.css" />
• <script type="text/javascript" src="jquery.min.js"></script>
• <script type="text/javascript" src="jquery.uploadify.js"></script>

使用方法

 <form>
 <div id="queue"></div>
 <input id="file_upload" name="file_upload" type="file" multiple="true">
 </form>
 <div id="uploadfiles"></div> 
<div id="fileQueue" style="clear:both"></div>
<script type="text/javascript">
var timestamp = new Date().getTime();
var token = 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 = '<img class="upload_load" src="/static/images/upload.gif" align="absmiddle" />';
 $('#uploadfiles').append($imgHtml);
 },
 'onUploadSuccess': function(file, data, response) {
 $('.upload_load').remove();
 var json = $.parseJSON(data);
 if (json.state == 'success') {
 $imgHtml = '<span id="file_' + json.file_id + '">';
 $imgHtml += '<a href="' + json.file + '" target="_blank">';
 $imgHtml += '<img src="' + json.file + '" width="100" height="100" align="absmiddle"/>';
 $imgHtml += '</a>';
 $imgHtml += '<a href="javascript:uploadifyRemove("' + json.file + '")">删除</a>';
 $imgHtml += '</span>';
 $($imgHtml).appendTo('#uploadfiles');
 } else {
 alert(json.message);
 }
 },
 'onQueueComplete': function() {
 $('.upload_load').remove();
 }
 });
}); 
</script>

参数说明

文件UploaderDemo.php下载

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

内容总结

以上是互联网集市为您收集整理的详解jQuery uploadify文件上传插件的使用方法全部内容，希望文章能够帮你解决详解jQuery uploadify文件上传插件的使用方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端