<%@ 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 中的路径.这也是头疼之一
解决方案 »
- AspNetPager.dll在服务器无法加载
- 如何用JQuery获得table中第一行的td是否触发了mouseenter
- sql数据库内存分配更改后,好像不起作用....
- 如何将Excel数据导入数据库?急!!
- 研究了几天ajax了,还不知道怎么读呢???请教高手
- 为什么页面刷新后m的值变化?我已经if(!this.IsPostBack)!!
- asp.net另存excel里的图片。
- asp.net cookie 二级域名传值 接收不到值
- radio和textera问题
- DataGrid分页的问题,数据源用的是DataReader
- 我这么写为什么不执行呢?哪错了呢?
- 在Repeater中有一个HyperLink 里面嵌套了一个 Image如何在后台找到这个Image啊?
我做的那个预览很简单选择文件,用uploadify自动上传生成了个缩略图再返回了缩略图的路径在onComplete事件中用个JS方法显示的。。(我那个是为了切图,你可以直接赋给一个image标签)