uploadify上传文件

来源：互联网发布：淘宝海参老板神对话编辑：程序博客网时间：2024/05/16 11:50

发现网上很多人写的都好像是旧的方法，好像已经过时了……找了很久

在Change Log.txt中看的见版本

这个是我的v3.2.1- Updated uploadify.swf with security updates from secure swfupload.

自己写了一个，又找了别人的一个，贴上两个文件

这个是我自己写的，实现了单个文件和多文件上传的效果

Html代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>uploadify多文件上传</title>  
  
<script type="text/javascript" src="../js/jquery-1.7.2.js" ></script>  
<script type="text/javascript" src="uploadify/scripts/jquery.uploadify.js" ></script>  
  
<script type="text/javascript">  
    $(function(){  
        $("#testFileInput").uploadify({  
            swf:'uploadify/scripts/uploadify.swf',  
            uploader:'../UploadUtil',  
            formData:{PHPSESSID:'xxx', ajax:1},  
            buttonText:'请选择文件',  
            fileSizeLimit:'200KB',  
            fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;',  
            fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',  
            auto:true,  
            multi:true  
        });  
        $("#testFileInput2").uploadify({  
            swf:'uploadify/scripts/uploadify.swf',  
            uploader:'../UploadUtil',  
            queueID:'fileQueue',  
            buttonImage:'uploadify/img/add.jpg',  
            buttonClass:'my-uploadify-button',  
            cancelImg: 'uploadify/img/cancel.jpg',  
            width:102,  
            auto:false,  
            multi:true  
        });  
    });  
</script>  
  
<link rel="stylesheet" type="text/css" href="uploadify/css/uploadify.css"/>  
  
<style type="text/css" media="screen">  
.my-uploadify-button {  
    background:none;  
    border: none;  
    text-shadow: none;  
    border-radius:0;  
}  
  
.uploadify:hover .my-uploadify-button {  
    background:none;  
    border: none;  
}  
  
.fileQueue {  
    width: 400px;  
    height: 150px;  
    overflow: auto;  
    border: 1px solid #E5E5E5;  
    margin-bottom: 10px;  
}  
</style>  
  
</head>  
<body>  
<h2>uploadify多文件上传</h2>  
        <input id="testFileInput" type="file" name="image" />  
  
    <div class="divider"></div>  
  
    <input id="testFileInput2" type="file" name="image2" />  
      
    <div id="fileQueue" class="fileQueue"></div>  
      
    <input type="image" src="uploadify/img/upload.jpg" onclick="$('#testFileInput2').uploadify('upload', '*');"/>  
    <input type="image" src="uploadify/img/cancel.jpg" onclick="$('#testFileInput2').uploadify('cancel', '*');"/>  
</body>  
</html>  

这个是别人写的，具体解释了参数的意义和使用方法，呃，已经很完整了，也可以自己再上网找找

Html代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>uploadify 多文件上传例子</title>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
<script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="uploadify.css">  
<style type="text/css">  
body {  
    font: 13px Arial, Helvetica, Sans-serif;  
}  
.haha{  
    color:#FFFFFF;  
}  
#queue {  
    background-color: #FFF;  
    border-radius: 3px;  
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);  
    height: 103px;  
    margin-bottom: 10px;  
    overflow: auto;  
    padding: 5px 10px;  
    width: 300px;  
}  
</style>  
</head>  
  
  
<body>  
    <h1>Uploadify Demo</h1>  
    <form>  
        <div id="queue"></div>  
        <input id="file_upload" name="file_upload" type="file" multiple="true">  
    </form>  
      
    <script type="text/javascript">  
        $(function() {  
            $('#file_upload').uploadify({  
                'debug'         : false,  
                'auto'          : true,             //是否自动上传,  
                'buttonClass'   : 'haha',           //按钮辅助class  
                'buttonText'    : '上传图片',       //按钮文字  
                'height'        : 30,               //按钮高度  
                'width'         : 100,              //按钮宽度  
                //'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false  
                'fileObjName'   : 'files',           //默认 Filedata, $_FILES控件名称  
                'fileSizeLimit' : '1024KB',          //文件大小限制 0为无限制 默认KB  
                'fileTypeDesc'  : 'All Files',       //图片选择描述  
                'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认：'*.*'  
                'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式  
                //'overrideEvents': ['onUploadProgress'],  // The progress will not be updated  
                //'progressData' : 'speed',             //默认percentage 进度显示方式  
                'queueID'       : 'queue',              //默认队列ID  
                'queueSizeLimit': 20,                   //一个队列上传文件数限制  
                'removeCompleted' : true,               //完成时是否清除队列 默认true  
                'removeTimeout'   : 3,                  //完成时清除队列显示秒数,默认3秒  
                'requeueErrors'   : false,              //队列上传出错，是否继续回滚队列  
                'successTimeout'  : 5,                  //上传超时  
                'uploadLimit'     : 99,                 //允许上传的最多张数  
                'swf'  : 'uploadify.swf', //swfUpload  
                'uploader': 'uploadify.php', //服务器端脚本  
  
  
                //修改formData数据  
                'onUploadStart' : function(file) {  
                    //$("#file_upload").uploadify("settings", "someOtherKey", 2);  
                },  
                //删除时触发  
                'onCancel' : function(file) {  
                    //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');  
                },  
                //清除队列  
                'onClearQueue' : function(queueItemCount) {  
                    //alert(queueItemCount + ' file(s) were removed from the queue');  
                },  
                //调用destroy是触发  
                'onDestroy' : function() {  
                    alert('我被销毁了');  
                },  
                //每次初始化一个队列是触发  
                'onInit' : function(instance){  
                    //alert('The queue ID is ' + instance.settings.queueID);  
                },  
                //上传成功  
                'onUploadSuccess' : function(file, data, response) {  
                    //alert(file.name + ' | ' + response + ':' + data);  
                },  
                //上传错误  
                'onUploadError' : function(file, errorCode, errorMsg, errorString) {  
                    //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);  
                },  
                //上传汇总  
                'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  
                    $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');  
                },  
                //上传完成  
                'onUploadComplete' : function(file) {  
                    //alert('The file ' + file.name + ' finished processing.');  
                },  
               
            });  
        });  
  
  
        //变换按钮  
        function changeBtnText() {  
            $('#file_upload').uploadify('settings','buttonText','继续上传');  
        }  
  
  
        //返回按钮  
        function returnBtnText() {  
            alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));  
        }  
    </script>  
    <h4>操作:</h4>   
    <a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a> &nbsp;|&nbsp;  
    <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a> &nbsp;|&nbsp;  
    <a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a> &nbsp;|&nbsp;  
    <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a> &nbsp;|&nbsp;  
    <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a> &nbsp;|&nbsp;  
    <a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a> &nbsp;|&nbsp;  
    <a href="javascript:changeBtnText();">变换按钮</a> &nbsp;|&nbsp;  
    <h4>大小:</h4>  
    <div id='progress'></div>   
</body>  
</html>  

0 0