添加文件

素颜马尾好姑娘i 2022-02-03 06:17 175阅读 0赞

**添加文件**

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

![在这里插入图片描述][20190508220901229.png]  
布局记得要把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的方式提交，然后再判断文件，判断是否有目录否则就创建目录，设置目录路径，保存文件路径，保存文件，接着就是上传文件，判断文件上传的状态，最后就是图片的压缩，共有四部分。  
    上传文件到表单成功了，表单里可以文字类型，图片类型等，点击需要的文件，然后上传到表单上，图片有压缩效果。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70]

[20190508220901229.png]: /images/20220203/1e6ca03a602040b2bc737e8cdb4bbc28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70]: /images/20220203/8348b4c5d15d43c6ba402651927f6ee0.png