<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 id="Head1" runat="server">
    <title>Http多文件上传组件</title>
    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet"
        type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"> </script>    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"> </script>    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"> </script>    <script type="text/javascript">
    
        $(document).ready(function() {
         $("#Cancel").hide();
         $("#Upload").hide();
         $("#testimg").hide();
         $("#uploadify").uploadify({
         'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',  //指定flash文件路径
         'script': 'UploadHandler.ashx',//指定处理页面
         'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',//列表中文件后面的取消按钮图标
         'folder': 'UploadFile',//上传文件目录
         'queueID': 'fileQueue',//唯一ID标识与显示的DIVID一致
         'fileExt': '*.jpg;*.gif;*.bmp', //允许文件上传类型,和fileDesc一起使用.
            'fileDesc': '*.jpg;*.gif;*.bmp',  //将不允许文件类型,不在浏览对话框的出现.
         'auto': false, //如果是true,那么上传的文件不需要点击按钮直接上传
         'multi': true, //是否允许多文件同时上传
         'method ':'get',//传递方式
//         'queueSizeLimit': null, //限制上传文件数
         'buttonText': '添加上传文件',
//         'displayData':'speed', //传输平均数和百分比选择
         'onSelectOnce': function(event,data) {
         //显示
         $('#Upload').show();
         $("#Cancel").show();
         $('#status-message').text(data.filesSelected + ' 文件正在等待上传…….');
         },
         'onSelect':function(e,queueID,fileObj) {
         },
         'onComplete': function(event, queueID, fileObj, response, data) { //查了资料很多人说是在这里预览显示 将imag的src换成input file中的路径 可是我试过很多次了 都是上传后才可以
         $('#filesUploaded').append('<img src=' + response + ' width=100 height=150><input type=hidden value=' + response + ' name=pic[]>');
//         alert(response);//这里返回的是这样的路径/UploadFile/图片名称.jpg
         },
         'onAllComplete': function(event,data) {
                      $('#status-message').text(data.filesUploaded + ' 文件上传完成!' + data.errors + '文件错误!');
           $("#Cancel").hide();
           $("#Upload").hide();
         },
         onError: function(event, queueID, fileObj) {
         alert("文件:" + fileObj.name + " 上传失败");
         },
         onCancel: function(event, queueID, fileObj) {
         alert("取消文件:" + fileObj.name);
         }
         });
        });
          
    </script>    <style type="text/css">
        #Upload
        {
            color: #FFF;
            border: 1px #FFF solid;
            height: 30px;
            background-image: url(                 'images/hei-004.gif' );
            width: 62px;
        }
        #Cancel
        {
            color: #FFF;
            border: 1px #FFF solid;
            height: 30px;
            background-image: url(                 'images/hei-004.gif' );
            width: 62px;
        }
        #title
        {
            border: 1px Scrollbar;
            margin: 0px;
        }
    </style>
</head>
<body>
    <div style="text-align: center; width: 100%;">
        <fieldset id="title">
            <legend>HTTP上传组件</legend>
            <table style="border: 1px  solid steelblue">
                <tr>
                    <td style="text-align: left">
                        <div id="filesUploaded">
                        </div>
                        <div id="status-message">
                        </div>
                        <div id="fileQueue">
                        </div>
                        <input type="file" name="uploadify" id="uploadify" />
                        <p>
                            <input id="Upload" type="button" value="开始上传" onclick="javascript:$('#uploadify').uploadifyUpload(); " />
                            <input id="Cancel" type="button" value="取消上传" onclick="javascript:$('#uploadify').uploadifyClearQueue(); " />
                        </p>
                        <p>
                            <span id="id_span_msg"></span>
                        </p>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
</body>
</html>
利用这个插件做了一个上传功能 现在需求变更需要加一个上传预览,可是我试过好多办法 不行.
很多人说在那个上传成功后的事件中处理 但是预览不是还没上传么 我现在只能实现上传完后显示图片.希望做过的朋友指点.
现在是通过flash来上传的。所以一般的JS上传预览无法获取到input file 中的路径.这也是头疼之一