zoukankan      html  css  js  c++  java
  • 文件的上传(1)(表单上传和ajax文件异步上传)

    文件的上传(表单上传和ajax文件异步上传)
             项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理!
    资源下载:
    
    一.jQuery官方下载地址:https://jquery.com/download/
    
     
    
    一.表单上传:
    
    html客户端部分:
    
    <form action="upload.ashx" method="post" enctype="multipart/form-data">
            选择文件:<input type="file" name="file1" /><br />
            <input type="submit" value="上传" />
        </form>
    一般处理程序服务器端:
    
    复制代码
      public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                HttpPostedFile file1 = context.Request.Files["file1"];
                helper.uploadFile(file1, "~/upload/");//这里就是对相应方法进行调用
                context.Response.Write("ok");//提示执行成功
            }
    复制代码
    上传代码的封装:
    
    复制代码
    /// <summary>
            /// 上传图片
            /// </summary>
            /// <param name="file">通过form表达提交的文件</param>
            /// <param name="virpath">文件要保存的虚拟路径</param>
            public static void uploadImg(HttpPostedFile file,string virpath)
            {          
                if (file.ContentLength > 1024 * 1024 * 4)
                {
                    throw new Exception("文件不能大于4M");
                }
                string imgtype = Path.GetExtension(file.FileName);
                if(imgtype!=".jpg"&&imgtype!=".jpeg")  //图片类型进行限制
                {
                    throw new Exception("请上传jpg或JPEG图片");
                }
                using (Image img = Bitmap.FromStream(file.InputStream))
                {
                    string savepath = HttpContext.Current.Server.MapPath(virpath+file.FileName);
                    img.Save(savepath);
                }
            }
            /// <summary>
            /// 上传文件
            /// </summary>
            /// <param name="file">通过form表达提交的文件</param>
            /// <param name="virpath">文件要保存的虚拟路径</param>
            public static void uploadFile(HttpPostedFile file, string virpath)
            {
                if (file.ContentLength > 1024 * 1024 * 6)
                {
                    throw new Exception("文件不能大于6M");
                }
                string imgtype = Path.GetExtension(file.FileName);
                //imgtype对上传的文件进行限制
                if (imgtype != ".zip" && imgtype != ".mp3")
                {
                    throw new Exception("只允许上传zip、rar....文件");
                }
                string dirFullPath=  HttpContext.Current.Server.MapPath(virpath);
                if (!Directory.Exists(dirFullPath))//如果文件夹不存在,则先创建文件夹
                {
                    Directory.CreateDirectory(dirFullPath);
                }
                file.SaveAs(dirFullPath + file.FileName);
            }
    复制代码
    二.Ajax文件异步上传:
    
     注明:既然有了表单上传为什么又要ajax上传呢?因为表单上传过程中,整个页面就刷新了!ajax异步上传就可以达到只刷新局部位置,下面就简单看看ajax上传吧!
    
    html客户端部分:
    
    复制代码
    <head> 
    <script src="jquery-2.1.4.js"></script>
        <script>
            $(function () {
                $("#upload").click(function () {
                    $("#imgWait").show();
                    var formData = new FormData();
                    formData.append("myfile", document.getElementById("file1").files[0]);   
                    $.ajax({
                        url: "upload.ashx",
                        type: "POST",
                        data: formData,
                        /**
                        *必须false才会自动加上正确的Content-Type
                        */
                        contentType: false,
                        /**
                        * 必须false才会避开jQuery对 formdata 的默认处理
                        * XMLHttpRequest会对 formdata 进行正确的处理
                        */
                        processData: false,
                        success: function (data) {
                            if (data.status == "true") {
                                alert("上传成功!");
                            }
                            if (data.status == "error") {
                                alert(data.msg);
                            }
                            $("#imgWait").hide();
                        },
                        error: function () {
                            alert("上传失败!");
                            $("#imgWait").hide();
                        }
                    });
                });
            });
        </script>
    </head>
    <body>   
            选择文件:<input type="file" id="file1" /><br />
            <input type="button" id="upload" value="上传" />
            <img src="wait.gif" style="display:none" id="imgWait" />   
    </body>
    复制代码
     
    
    一般处理程序服务器端:
    
    复制代码
    public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/html";
                if (context.Request.Files.Count > 0)
                {
                    HttpPostedFile file1 = context.Request.Files["myfile"];
                    helper.uploadFile(file1, "~/upload/");  //这里引用的是上面封装的方法
                    WriteJson(context.Response, "true", "");
                }
                else
                {
                    WriteJson(context.Response, "error", "请选择要上传的文件");
                }
            }
    复制代码
    json代码封装:
    
    复制代码
    public static void WriteJson(HttpResponse response,
               string status1, string msg1, object data1 = null)
            {
                response.ContentType = "application/json";
                var obj = new { status = status1, msg = msg1, data = data1 };
                string json = new JavaScriptSerializer().Serialize(obj);
                response.Write(json);
            }
  • 相关阅读:
    final发布用户使用报告
    PSP总结报告
    每周例行报告
    王者荣耀交流协会final发布-第3次scrum立会
    每周例行报告
    王者荣耀交流协会互评Beta版本--爱阅app
    Beta发布用户使用报告
    每周例行报告
    Beta冲刺第二周王者荣耀交流协会第六次会议
    每周例行报告
  • 原文地址:https://www.cnblogs.com/JonaLin/p/11057522.html
Copyright © 2011-2022 走看看