如何压缩文件并提交文件

如何压缩文件并提交文件

我们在做有关数据表格的项目时经常会遇到要处理图片的情况，那么图片该如何获取，压缩和添加呢？

• 上传图片

1、打开控件

我们上传文件是借助type=”file”的input标签来完成的，但它并不能和其它表单元素并存，所以我们要先让图片上传，再和其它表单一起提交保存。

    <div style="display: none">

        <form id="formEditorFile" action="/ManualImport/UpEeditorFile" method="post" enctype="multipart/form-data">

            <input type="file" name="imgFile" class="form-control"  onchange="funUpEeditorFile()" />

        </form>

</div>

在上面的代码中，

-enctype 属性就规定在发送到服务器之前应该如何对表单数据进行编码，

-multipart/form-data 不对字符编码。

-在使用包含文件上传控件的表单时，必须使用该值。

-Action:提交的路径

-Method:提交的方式

我们给input标签绑定一个onchange事件，当我们选择文件之后就会触发这个事件。

在这个onchange事件的操作是去提交这个form表单。

1. 文件上传

在onchange事件里找到form表单，

        //提交文件

        function funUpEeditorFile()

        {

//ajaxSubmit（）直接提交form表单，提交的实际就是我们选择的图片文件

            $("#formEditorFile").ajaxSubmit(function (rtMsg) {

                if (rtMsg.State) {

                    var strContent = $("#textContent").html();

                    strContent += rtMsg.Text;

                    //更新内容框

                    $("#textContent").html(strContent);

                } else {

                    layer.alert(rtMsg.Text);

                }

            })

        }

选择完提交文件后，我们需要在指定在控制器中对图片进行处理。

//imgFile 接收传过来的图片

  public ActionResult UpEeditorFile(HttpPostedFileBase imgFile)

        {

            ReturnJson returnJson = new ReturnJson();

            try

            {

                if (imgFile != null)

                {

                    //获取文件后缀

                    string fileExtension = Path.GetExtension(imgFile.FileName);

                    fileExtension = fileExtension.ToLower();//全部转换成小写

                    //判断是否未图片文件

                    if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))

                    {

                        //判断是否存在需要的目录，不存在则创建

                        //临时保存上传的图片的文件夹

                        if (!Directory.Exists(Server.MapPath("~/Document/Title/Temp")))

                        {

Directory.CreateDirectory(Server.MapPath("~/Document/Title/Temp"));

                        }

                         //最终保存上传图片的文件夹

                        if  (!Directory.Exists(Server.MapPath("~/Document/Title/Images")))

                        {

                             Directory.CreateDirectory(Server.MapPath("~/Document/Title/Images"));

                        }

                        //文件名

                        string fileName = DateTime.Now.ToString("yyyy-MM-dd") + Guid.NewGuid() + fileExtension;

                        //拼接文件的保存路径

                        string filePath = Server.MapPath("~/Document/Title/Temp/") +fileName;

                        //保存文件

                        imgFile.SaveAs(filePath);

                        string imgHtml = "<img οnlοad=\"AutoResizeImage(200,150,this)\" src=\"/Document/Title/Temp/" + fileName+"\" />";

//onload事件里面绑定了压缩图片的方法，这里设置的图片压缩后最大的宽度为200，最大高度150，this指的是当前的这张图片

                        returnJson.State = true;

                        returnJson.Text = imgHtml;

                    }

                    else

                    {

                        returnJson.Text = "只支持上传图片文件(gif,jpg,bmp,jpeg,png)";

                    }

                }

                else 

                {

                    returnJson.Text = "文件为空！";

                }

            }

            catch (Exception e)

            {

                returnJson.Text = "数据异常";

            }

            return Json(returnJson, JsonRequestBehavior.AllowGet);

        }

二、压缩图片

我们做项目时经常会考虑到文本框的大小，所以需要对图片进行压缩，让它呈现出来的效果更好一点。

        /*

        图片大小压缩

        param {} maxWidth

        param {} maxHeight

        param {} objImg

        returns {}

        */

maxWidth：压缩后的最大宽度

maxHeight：压缩后的最大宽度

objImg：这张图片

        //1.7图片压缩

        function AutoResizeImage(maxWidth, maxHeight, objImg) {

            //var img = new Image();

            //img.src = objImg.src;

            var hRatio;//最大高度和这张图片的比例

            var wRatio;//最大宽度和这张图片的比例

            var Ratio = 1;//原始值，表示不压缩

            var w = objImg.width;//原始宽度

            var h = objImg.height;//原始高度

            wRatio = maxWidth / w;

            hRatio = maxHeight / h;

            if (maxWidth == 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 <= hRatio ? wRatio : hRatio);

            }

            if (Ratio < 1) {

                w = w * Ratio;

                h = h * Ratio;

            }

            objImg.height = h;

            objImg.width = w;

        }