jQuery uploadify 文件上传

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

在线实例

实例预览 Uploadify 在线实例Demo演示

实例中用到的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(&quot;' + json.file + '&quot;)">删除</a>';
                $imgHtml += '</span>';
                $($imgHtml).appendTo('#uploadfiles');
            } else {
                alert(json.message);
            }
        },
        'onQueueComplete': function() {
            $('.upload_load').remove();
        }
    });
});                
</script>

参数说明

<ahref="javascript:$(‘#file_upload’).uploadify(‘cancel’)">
取消第一个</a>
<a
href="javascript:$(‘#file_upload’).uploadify(‘cancel’,
‘*’)">清空队列</a>
<a
href="javascript:$(‘#file_upload’).uploadify(‘upload’,
‘*’)">开始上传所有任务</a>

<a
href="javascript:$(‘#file_upload’).uploadify(‘destroy’)">
销毁Uploadify实例</a>

<a
href="javascript:$(‘#file_upload’).uploadify(‘disable’,
true)">禁用按钮</a>
<a
href="javascript:$(‘#file_upload’).uploadify(‘disable’,
false)">启用按钮</a>

$(‘#file_upload’).uploadify(‘settings’,'buttonText’,'BROWSE’);
$(‘#file_upload’).uploadify(‘settings’,'buttonText’));

<a
href="javascript:$(‘#file_upload’).uploadify(‘upload’,
‘*’)">开始上传</a>
<a
href="javascript:$(‘#file_upload’).uploadify(‘stop’)">
停止上传</a>

<a
href="javascript:$(‘#file_upload’).uploadify(‘upload’,'*’)">
开始上传所有文</a>