异步上传文件多种方式归纳
最近在做异步上传文件的工作,用到了一些库,这里归纳下,暂且不考虑异常处理,仅作为demo。
1.不用任何插件，利用iframe，将form的taget设为iframe的name，注意设为iframe的id是没用的，跟网上很多说的不太一致
iframe_upload.htm
<!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>
<title></title>
</head>
<body>
<form id="form1" method="post" action="Upload.aspx" enctype="multipart/form-data" target="uploadframe">
<input type="file" id="upload" name="upload" />
<input type="submit" value="Upload" />
</form>
<iframe id="uploadframe" name="uploadframe" style="visibility:hidden"></iframe>
</body>
</html>
Upload.aspx
<%@ Page Language="C#" %>
<%
Response.ClearContent();
try
{
if (Request.Files.Count == 0) Response.Write("Error");
else
{
HttpPostedFile file= Request.Files[0];
string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\Upload\");
string path = folder + Guid.NewGuid().ToString() + ext;
file.SaveAs(path);
Response.Write("Success");
}
}
catch
{
Response.Write("Error");
}
%>
2.利用ajaxupload.js
Default.aspx
<!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>Ajax Upload Demo</title>
<script type="text/javascript" src="Scirpt/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scirpt/ajaxupload.js"></script>
<script type="text/javascript">
$(function ()
{
// 创建一个上传参数
var uploadOption =
{
// 提交目标
action: "Upload.aspx",
// 自动提交
autoSubmit: false,
// 选择文件之后…
onChange: function (file, extension) {
if (new RegExp(/(jpg)|(jpeg)|(bmp)|(gif)|(png)/i).test(extension)) {
$("#filepath").val(file);
} else {
alert("只限上传图片文件，请重新选择！");
}
},
// 开始上传文件
onSubmit: function (file, extension) {
$("#state").val("正在上传" + file + "..");
},
// 上传完成之后
onComplete: function (file, response) {
if (response == "Success") $("#state").val("上传完成！");
else $("#state").val(response);
}
}
// 初始化图片上传框
var oAjaxUpload = new AjaxUpload('#selector', uploadOption);
// 给上传按钮增加上传动作
$("#up").click(function ()
{
oAjaxUpload.submit();
});
});
</script>
</head>
<body>
<div>
<label>一个普通的按钮：</label><input type="button" value="选取图片" id="selector" />
<br />
<label>选择的图片路径：</label><input type="text" readonly="readonly" value="" id="filepath" />
<br />
<label>不是submit按钮：</label><input type="button" value="上传" id="up" />
<br />
<label>上传状态和结果：</label><input type="text" readonly="readonly" value="" id="state" />
</div>
</body>
</html>
Upload.aspx
<%@ Page Language="C#" %>
<%
Response.ClearContent();
try
{
if (Request.Files.Count == 0) Response.Write("Error");
else
{
HttpPostedFile file= Request.Files[0];
string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\Upload\");
string path = folder + Guid.NewGuid().ToString() + ext;
file.SaveAs(path);
Response.Write("Success");
}
}
catch
{
Response.Write("Error");
}
%>
3.利用ajaxfileupload.html
ajaxfileupload.html
<html>
<head>
<title>Ajax File Uploader Plugin For Jquery</title>
<script src="Scirpt/jquery.js" type="text/javascript"></script>
<script src="Scirpt/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
function ajaxFileUpload() {
$("#loading")
.ajaxStart(function () {
$(this).show();
})
.ajaxComplete(function () {
$(this).hide();
});
$.ajaxFileUpload
(
{
url: 'Upload3.aspx',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
data: { name: 'logan', id: 'id' },
success: function (data, status) {
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
//alert(data.error.toJSONString());
} else {
alert(data.msg);
//alert(data.toJSONString());
}
}
},
error: function (data, status, e) {
//alert(e.toJSONString());
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>
Ajax File Upload Demo</h1>
<img id="loading" src="loading.gif" style="display: none;">
<form name="form" action="" method="post" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>
Please select a file and click Upload button
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">
Upload</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Upload
{
public partial class Upload3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = HttpContext.Current.Request.Files;
if (null == files || files.Count == 0)
{
//DoNothing
}
else
{
string msg = null;
msg = UploadMain();
//Response.ContentType = "application/json";
Response.Write(msg);
Response.End();
}
}
private string UploadMain()
{
HttpPostedFile file = Request.Files[0];
string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\Upload\");
string fileName = Guid.NewGuid().ToString() + ext;
string path = folder + fileName;
file.SaveAs(path);
string message = getMsg("0047 File Upload Success!", null);
return message;
}
private string getMsg(string msg, string err)
{
if (String.IsNullOrEmpty(msg))
{
msg = "";
}
if (String.IsNullOrEmpty(err))
{
err = "";
}
string message = "{";
message += "msg:'#msg#',";
message += "error:'#err#'";
message += "}";
return message.Replace("#msg#", msg).Replace("#err#", err);
}
}
}
4.html5+html5uploader.js
html5uploder.htm
<!DOCTYPE html>
<html>
<script src="Scirpt/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scirpt/jquery.html5uploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#multiple").html5Uploader({
postUrl: "Upload2.aspx",
onSuccess: function (a, b, c) {
var img = $('<img/>').attr('src', "http://localhost:83/Upload/"+c).css('width', '140px').css('height', '140px').css('margin', '10px');
$('#content').append(img);
}
});
});
</script>
<head>
<title></title>
</head>
<body>
<input id="multiple" type="file" accept="image/*" multiple />
<div id="content"></div>
</body>
</html>
Default2.aspx
<%@ Page Language="C#" %>
<%
Response.ClearContent();
try
{
if (Request.Files.Count == 0) Response.Write("Error");
else
{
HttpPostedFile file= Request.Files[0];
string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\Upload\");
string fileName = Guid.NewGuid().ToString()+ext;
string path = folder + fileName;
file.SaveAs(path);
Response.Write(fileName);
}
}
catch
{
Response.Write("Error");
}
%>