当前位置: 移动技术网 > IT编程>开发语言>.net > mvc file控件无刷新异步上传操作源码

mvc file控件无刷新异步上传操作源码

2017年12月12日  | 移动技术网IT编程  | 我要评论

殷悦笑子,格力吸顶式空调,フォルト

前言

  上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件。今天遇到一个问题:input控件file无法进行异步无刷新上传。真真的感到别扭。所以就尝试这去处理了一下。主要分三个部分:上传类的封装,html input控件file处理和后台controller的调用。

上传封装类:

  此类主要两个功能,一些简单的筛选和文件重命名操作。

文件的筛选包括:

  文件类型,文件大小

重命名:

  其中默认为不进行重命名操作,其中重命名默认为时间字符串datetime.now.tostring("yyyymmddhhmmss")

文件地址:

  可进行自定义。相对地址与绝对地址都可以。

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading.tasks;
using system.io;
using system.web;
namespace commonhelper
{
 public class uploadfile : system.web.ui.page
 {
  public uploadfile()
  {

  }
  //错误信息
  public string msg { get; set; }
  public string fullname { get; set; }
  //文件名称
  public string filename { get; set; }
  /// <summary>
  /// 文件上传
  /// by wyl 20161019
  /// </summary>
  /// <param name="filepath">文件上传地址</param>
  /// <param name="size">文件规定大小</param>
  /// <param name="filetype">文件类型</param>
  /// <param name="files">file上传的文件</param>
  /// <param name="isrename">是否重名名</param>
  /// <returns></returns>
  public bool upload_file(string filepath, int size, string[] filetype, bool isrename = false)
  {
   filepath = server.mappath(filepath);
   //文件夹不存在就创建
   if (!directory.exists(filepath))
    directory.createdirectory(filepath);
   if (httpcontext.current.request.files.count == 0)
   {
    msg = "文件上传失败";
    return false;
   }
   msg = "上传成功";
   var file = httpcontext.current.request.files[0];
   if (file.contentlength == 0)
   {
    msg = "文件大小为0";
    return false;
   }
   if (file.contentlength > size * 1024)
   {
    msg = "文件超出指定大小";
    return false;
   }
   var filex = httpcontext.current.request.files[0];
   string fileext = path.getextension(filex.filename).tolower();
   if (filetype.count(a => a == fileext) < 1)
   {
    msg = "文件类型不支持";
    return false;
   }
   if (isrename)
    filename = datetime.now.tostring("yyyymmddhhmmss") + fileext;
   filename = filex.filename;
   fullname = path.combine(filepath, filename);
   file.saveas(fullname);
   return true;
  }
 }
}

上传文件的方法在这也没有什么过得的介绍。看代码注释应该都好理解。

页面html

<div class="content">
<form method="post" target="hidden_frame" enctype="multipart/form-data" action="/customfrom/formdesign/fileupload" name="form">
<input class="m input" name="filename" type="file">
<input class="btn file-input" value="提交..." name="f2" type="submit">
<iframe id="hidden_frame" name="f2" style="display: none">
<html>
<head></head>
<body></body>
</html>
</iframe>
</form>
</div>

注:因为mvc上传文件input控件file不支持异步无刷新上传,故此用调用跳转到iframe的方式进行上传无刷新操作。

以上页面就是上传控件的html定义。有几点要注意的

1.enctype="multipart/form-data"必须加上,表单中enctype="multipart/form-data"的意思,是设置表单的mime编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作. enctype="multipart/form-data"是上传二进制数据; form里面的input的值以2进制的方式传过去。

2.form的name 要加上

3.提交按钮是submit,当然你如果想写js 设置成button也成。这个没什么好说的。

4.iframe 中style="display: none"

以上就是整个的布局和提交上传文件到后台,并且跳转到ifrom中,接下来就是接受调用上面上传文件的方法。然后在iframe页面提示上传结果,然后把iframe关闭即可。

后台代码:

 [httppost]
  public actionresult fileupload()
  {
   //从配置文件中获取支持上传文件格式
   string[] filetype = configurationmanager.appsettings["filetype"].split('|');
   //上传文件路径
   string strpath = configurationmanager.appsettings["strpath"];
   uploadfile file= new uploadfile();
   bool flag = file.upload_file(strpath, 25000, filetype);
   return content("<script>window.alert('" + file.msg + "');window.top.close()</script>");
  }

注:

1.文件路径,文件保存路径放在了配置文件中,当然你也可以把文件大小,是否重命名都放到配置文件中。

2.返回到view的脚本先弹出提示框;在关闭窗口

3.根据你自己的需要去调用uploadfile的msg(错误提示),fullname (全名称), filename文件名称进行操作

4.window.top.close()关闭当前iframe的窗口,针对于兼容性请大家自行处理,我测试的没有问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网