ajax上传文件的原理与实现
发布时间：2020-12-15 21:42:42 所属栏目：百科 来源：网络整理
导读：ajax已经很普遍了，但使用ajax上传文件自己却一直都没有涉及，我只知道挺复杂的，上传文件不同于上传一般的表单数据，必须特殊处理，知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目需要，在网上找了找，没想到找到了两个支持ajax上传文件的jquery
|
ajax已经很普遍了，但使用ajax上传文件自己却一直都没有涉及，我只知道挺复杂的，上传文件不同于上传一般的表单数据，必须特殊处理，知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目需要，在网上找了找，没想到找到了两个支持ajax上传文件的jquery插件，jquery.uploadify.js和dropzone.min.js两个都可以实现ajax上传文件，效果也不错。
1使用jquery.uploadify.js上传文件 这种上传方式，使用了Flash，因此需要引用一个特殊的js文件swfobject.js，低版本的需要引用，高版本的这个文件已经包含在jquery.uploadify.js中了。另外低版本的参数和高版本的参数也不太一样了。 使用Uploadify v3.2.1的完整前台代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="Styles/jquery.uploadify.js" type="text/javascript"></script>
<link href="Styles/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
swf: 'Styles/uploadify.swf',uploader: 'Handler1.ashx?OperationType=upfile',//后台的处理地址
fileTypeDesc: '请选择excel文件',buttonText: '请选择excel文件',fileTypeExts: '*.xls','auto': false,onSelectError: function (file,errorCode,errorMsg) {
switch (errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings','queueSizeLimit') + "个文件！");
break;
case -110:
alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings','fileSizeLimit') + "大小！");
break;
case -120:
alert("文件 [" + file.name + "] 大小异常！");
break;
case -130:
alert("文件 [" + file.name + "] 类型不正确！");
break;
}
},onFallback: function () {
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},//上传到服务器，服务器返回相应信息到data里
onUploadSuccess: function (file,data,response) {
alert(data);
},onSelect: function (fileObj) {
alert("文件名：" + fileObj.name + "rn" +
"文件大小：" + fileObj.size + "rn" +
"创建时间：" + fileObj.creationdate + "rn" +
"最后修改时间：" + fileObj.modificationdate + "rn" +
"文件类型：" + fileObj.type
);
}
});
});
function doUplaod() {
$('#uploadify').uploadify('upload','*');
}
function closeLoad() {
$('#uploadify').uploadify('cancel','*');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:doUplaod()">上传</a>|
<a href="javascript:closeLoad()">取消上传</a>
</p>
</div>
</div>
</form>
</body>
</html>
Uploadify v2.1.0的写法 由于没有swfobject.js，需要添加引用
<script src="Scripts/swfobject.js" type="text/javascript"></script>另外部分参数也不一样，例如uploader，script 完整的前台代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<link href="Scripts/uploadify.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': 'Scripts/uploadify1.swf','script': 'Handler1.ashx?OperationType=upfile','cancelImg': 'Scripts/cancel.png','folder': 'UploadFile','queueID': 'fileQueue','multi': false,'fileExt': '*.doc;*.xls','fileDesc': '请选择excel文件','onSelect': function (e,queueId,fileObj) {
alert("唯一标识:" + queueId + "rn" +
"文件名：" + fileObj.name + "rn" +
"文件大小：" + fileObj.size + "rn" +
"创建时间：" + fileObj.creationDate + "rn" +
"最后修改时间：" + fileObj.modificationDate + "rn" +
"文件类型：" + fileObj.type
);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</p>
</div>
</form>
</body>
</html>
2使用dropzone.min.js上传文件 没有使用Flash，但对浏览器要求比较高，例如IE10以上才支持，应该是使用了html5的技术 完整的前端代码、
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="Scripts/dropzone.min.js" type="text/javascript"></script>
<link href="Scripts/dropzone.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(function ($) {
Dropzone.autoDiscover = false;
try {
var myDropzone = new Dropzone("#dropzone",{
paramName: "FileData",// The name that will be used to transfer the file
maxFilesize: 5,// MB
dictRemoveFile: '移除文件',dictCancelUpload: '取消上传',addRemoveLinks: true,uploadMultiple: false,acceptedFiles: '.xls',autoProcessQueue: true,dictRemoveFile: "关闭",dictFileTooBig: '此文件过大',dictCancelUploadConfirmation: '确定取消上传吗？',dictInvalidInputType: "不支持此类型文件上传！",parallelUploads: 1,//限制上传文件数
url: "Handler1.ashx?OperationType=upfile",init: function () {
this.on("success",function (file) {
//console.log("File " + file.name + "uploaded");
alert("文件" + file.name + "上传成功");
});
this.on("complete",function (file) {
this.removeFile(file);
});
this.on("removedfile",function (file) {
//alert(file.name);
});
},/* accept: function (file,done) {
//if (file.name == "11.jpg") {
// done("Naha,you don't.");
//}
//else {
done();
},*/
success: function (file,data) {
if (data.status === 1) {
$scope.uploadImage = data.message;
$scope.listUserImages();
} else {
//alertService.showAlert({
// content: data.message,// type: 'warning'
//});
//$('.dz-error-mark').show();
//alert(data.message);
}
},dictDefaultMessage:
'<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 上传</span> 文件 &;span class="smaller-80 grey">点击</span> <br /> &;i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',dictResponseError: 'Error while uploading file!',//change the previewTemplate to use Bootstrap progress bars
previewTemplate: "<div class="dz-preview dz-file-preview">n <div class="dz-details">n <div class="dz-filename"><span data-dz-name></span></div>n <div class="dz-size" data-dz-size></div>n <img data-dz-thumbnail />n </div>n <div class="progress progress-small progress-striped active"><div class="progress-bar progress-bar-success" data-dz-uploadprogress></div></div>n <div class="dz-success-mark"><span></span></div>n <div class="dz-error-mark"><span></span></div>n <div class="dz-error-message"><span data-dz-errormessage></span></div>n</div>"
});
} catch (e) {
alert('Dropzone.js does not support older browsers!');
}
});
</script>
</head>
<body>
<form id="dropzone" runat="server" action="Handler1.ashx?OperationType=upfile" class="dropzone dz-clickable" enctype="multipart/form-data" method="post">
<div class="dz-message" style="width:50px;height:50px;">
<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>
</div>
<div>
<div id="FileBed"></div>点击上传文件
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;" />
</div>
</form>
</body>
</html>
3后台处理代码
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string operatype = context.Request.QueryString["OperationType"];
if (operatype == "upfile")
{
HttpPostedFile file = context.Request.Files["FileData"];
if (file != null)
{
string fullPath = System.IO.Path.Combine(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory,"update"),DateTime.Now.Date.ToString("yyyyMMdd"));
file.SaveAs(fullPath + file.FileName);
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("上传成功");
}
public bool IsReusable
{
get
{
return false;
}
}
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |