希望博客园那个前辈在线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>
您当前的位置: