上传系列:jquery.upload.js

时间:2022-08-22 19:51:08

最近想做一个上传的总结,把自己用过的上传插件都写一写,哪天用到的时候就不用再一次的翻阅资料,现在页面上用到的上传插件,原理上都差不多,那我也就不再废话了,下面我主要记录一下几个比较常用的,由简到繁,这里我只写代码,其它的就不在啰嗦了:

  • jquery.upload.js
  • ajaxupload.js
  • uploadify
  • SWFUpload

jquery.upload.js


  这里只写主要的,至于js的引用我就不用说了是吧,自己添加上就行,我就不写了。

  前台html代码:

 <html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script>
/*文件上传*/
function upload() {
$.upload({ // 上传方法
url: '/System/Upload', // 上传地址
fileName: 'uploadfile', // 文件域名字
params: { name: 'pxblog' }, // 其他表单数据
dataType: 'json', // 上传完成后, 返回json, text
onSend: function () { // 上传之前回调,return true表示可继续上传
return true;
},
onSubmit: function () {
},
onComplate: function (data) { // 上传之后回调
if (data.msg) { } else {
alert("上传图片出错!");
}
}
})
}
</script>
</head>
<body>
<div>
<input type="button" onclick="upload()" value="点击上传" />
</div>
</body>
</html>

  后台接收文件的代码,这里用的MVC

 public ActionResult Upload(HttpPostedFileBase FileData)
{
// 如果没有上传文件
if (FileData == null || string.IsNullOrEmpty(FileData.FileName) || FileData.ContentLength == )
{
return this.HttpNotFound();
}
string filename = Path.GetFileName(FileData.FileName); //获得文件名
string extension = Path.GetExtension(FileData.FileName);//获得文件扩展名
string phyPath = Request.MapPath("/Upload/");
if (!Directory.Exists(phyPath))
{
Directory.CreateDirectory(phyPath);
}
decimal newid = Math.Abs(Guid.NewGuid().GetHashCode());
string filepath = phyPath + newid + extension;
FileData.SaveAs(filepath);
return Content(newid + extension);
}

  缺点:

  这种方式,有个缺点,而且还是在IE上,想想就郁闷,很多乱七八糟的问题都出现在IE上,微软咋就不能好好整整IE啊。

  如果咱们返回方式选择json的时候,IE有的版本会弹框提示下载,哎,遇到这种问题,也真是够倒霉的,没办法,自求多福吧