添加文件

添加文件

本文主要讲添加文件，文件有很多格式，例如：图片、文档、音频……等，首先是一个添加文件的按钮，点击就出现个选择框，类型是file的文件框，鼠标点击图片，确定，图片输入页面的form表单，也就是文件上传表单。

布局记得要把input标签的类型改为file，然后再给他改变事件。我们布局也是用bootstrap插件布局，一个div里放form表单，然后form表单里放文件框，就是input标签，类型为file的input。这样布局就可以直接把我们的文件框弹出来了。然后就是文件框的改变事件，
function openUpEeditorFile(){
$(“#formEditorFile input[type=’file’]”).click();
}//添加文件 选择需要图片文件
function funUpEeditorFile(){
//文件上传表单formEditorFile中input[type=file]的onchange事件
$(“#formEditorFile”).ajaxSubmit(function(data){
//ajaxSubmit是我们用的jQuery.form表单提交的插件
If(data.State){
var str = $(“#textContent”).html();
str + = data.Text;
$(“#textContent”).html(str);
}else{
layer.msg(data.Text,{icon:5,skin:”layui-layer-molv”});
}
});
}//文件上传表单
然后再控制器里定义添加文件的方法接受传过来的文件，然后把他进行处理，当然了我们添加文件的时候要创建文件夹，用来存放文件的，有临时的文件夹，还有些是模板的文件夹，就是用·一个Document的文件夹存放，上传的文件存放在里面，有些是定期自动消除的。我们可以自己在编程工具里创建，在解决方案资源管理器里，右键我们的项目，找到添加，然后新建文件夹，然后把名字改为Document就行，因为我们的项目都有层次性的，不一样的东西用不一样的文件夹装，有些外部的文件，还有我们自己创建的内部文件，自己封装的类，就把所有封装的类定义在一个文件夹里。

1. Areas—创建区域（嵌套多个页面的时候）
2. Content—存放图片、内部的css、内部的js
3. Controllers—是我们的控制器
4. EntityClass—存放我们要用的实体类（自定义的表），在数据库叫表
5. Models—是我们的模型，用来存放我们的数据，导入数据库的数据
6. Plugins—是外部的插件，封装好的插件
   这些文件夹我们只要创建好文件，然后把内容复制过来，然后点击下显示所有文件，再把复制的那些内容右键，包括在项目中，就这样内容就会显示在我们的项目里了。
   当然了上面我们说的是自己创建的文件夹，我们也可以代码创建文件。让我们一边创建一边完成添加文件吧。
   public ActionResult UpEeditorFile(HttpPostedFileBasa file){
   ReturnJson msg = new ReturnJson();
   mag.State = false;
   try{
   //判断文件是否为空
   If（file != null）{
   //获取文件类型
   string fileExtension = System.IO.Pat.
   GetExtension(file.FileName);
   //创建文件的名称
   string filename = DateTime.Now.ToString(“yyyy-MM-dd”)
   //表示全局唯一标识符（GUID）
   + Guid.NewGuid() + fileExtension;
   //检查目录是否存在，不存在就创建
   If(!Directory.Exists(Server.MapPath(“~/Document/Title/Temp”))){
   //创建目录/Document/Notice/
   Directory.CreateDirectory(Server.MapPath(“~/Document/Title/Images/”));
   }
   //保存文件的路径
   string filePath = Server。MapPath(“~/Document/Title/Temp/”) + filename;
   //若扩展名不为空则判断文件是否是指定图片类型，然后返回img
   If(fileExtension != null){
   fileExtension = fileExtension.ToLower();//转小写字母
   if(“(.gif)|(.lpg)|(.bmp)|(.jpeg)|(.png)”.Contains(fileExtension)){
   //保存文件
   File.SaveAs(filePath);//将文件保存到指定路径
   string str =“<img οnlοad=\”AutoResizeImage(200,200,this)\” “ + ”
   src =\”/Document/Title/Temp/” + filename +”\” />”；
   msg.State = true;
   msg.Text = str;
   }
   else{
   msg.Text = “只支持上传图片文件(gif,jpg,bmp,jpeg,png)”;
   } }
   }
   else{
   msg.Text =”上传的文件为空！”;
   }
   }
   catch(Exception){
   msg.Text = “上传数据异常！”;
   }
   return Json(msg,JsonRequestBehhavior.AllowGet);
   }
   因为表单里的宽度大小有限，所以要把图片压缩下，
   function AutoResizeImage(maxWidth,maxHeight,objImg){
   var img = new Image();
   img.src = objImg.src;
   var hRatio;
   var wRatio;
   var Ratio = 1;
   var w = img.width;
   var h = img.height;
   wRatio = maxWidth / w;
   hRatio = maxHeight / h;
   if(maxWidt == 0 && maxHeight == 0){
   Ratio = 1;
   }else if(maxWidth == 0){
   If(hRatio < 1) Ratio = hRatio;
   }else if(maxHeight == 0){
   If(wRatio < 1) Ratio = wRatio;
   }else if(wRatio < 1 || hRatio < 1){
   Ratio = (wRatio <= Ratio ? wRatio : hRatio);
   }
   If(Ratio < 1){
   w= w * Ratio;
   h = h * Ratio;
   }
   objImg.height = h;
   objImg.width = w;
   }//图片压缩
   整体就是这样，先布局，然后选择文件，再提交文件，ajaxSubmit的方式提交，然后再判断文件，判断是否有目录否则就创建目录，设置目录路径，保存文件路径，保存文件，接着就是上传文件，判断文件上传的状态，最后就是图片的压缩，共有四部分。
   上传文件到表单成功了，表单里可以文字类型，图片类型等，点击需要的文件，然后上传到表单上，图片有压缩效果。