希望博客园那个前辈在线Uplaodify上传插件
- HTML code
<%@ 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 中的路径.这也是头疼之一
[解决办法]