Asp.Net配合JQuery上传图片至项目文件夹

一、添加后台方法
 

添加以下代码：

[WebMethod]

        public static string Sc(string p, string n)

        {

            //截取 从 base64，  后的码

            string xp = p.Substring(p.IndexOf("4") + 2);

            //将 xp 文件码 转换为 byte 数组

           byte[] bt = Convert.FromBase64String(xp);

            //创建内存流 将图片进行 编码

            MemoryStream ms = new MemoryStream(bt);

            //将内存流 转换为 Image 图片对象

           System.Drawing.Image im = System.Drawing.Image.FromStream(ms);

            //创建一个图片类型  为 jpeg 格式

            ImageFormat fm = ImageFormat.Jpeg;

 

            //定义变量 保存当前项目的文件 路径

             string path = HttpRuntime.AppDomainAppPath+@"img\"+n;

 

            //保存图片  盘符：/文件夹名/文件夹名/文件名.后缀名

            im.Save(path, fm);

 

 

            return "成功:"+path;

        }

 

注意导入命名空间，否则会报错

using System.Drawing.Imaging;

using System.IO;

 

 

 

 

 

 

 

二、前台页面添加以下事件：
 

//文件框的改变事件

            $("#文件框id").change(function () {

 

                //定义变量 保存 所选择的文件的第一个文件

                //  jq对象.get(0)  --转换为js 对象  files 文件集合中  第一个 文件

                //普通文件框使用这个代码

　　　　var w = $("#文件框id ").get(0).files[0];

                //定义一个 文件读取对象

                var fr = new FileReader();

                //读取文件 路径

                fr.readAsDataURL(w);

            

                //加载到 img 图片框上

                fr.onloadend = function () {

                    //  fr.result  将图片路径转换为 base64 二进制路径

                    $("#图片框id").attr("src", fr.result);

                      console.log(fr.result);

                }

                   

            });

 

 

 

 

$("#按钮id").click(function () {

                //得到 图片的 路径

                var path = $("#图片框id").attr("src");

　　　　 var name = $("#文件框id").val();

                //C:/fakepath/图片名.jpg

                //截取得到图片名

                name=name.substring(name.lastIndexOf("\\")+1) ;

 

                $.ajax({

                         url: "当前页面名.aspx/Sc", //请求路径

                        type:"post",  //方式

                        data: "{p:'"+path+"',n:'"+name+"'}",  //参数 base64 路径码  ， 文件名

                        contentType: "application/json;charset=utf-8",

                        success: function (data)

                        {

                            console.log(data.d);

                        }, error: function (er)

                        {

                            console.log(er);

                        }

                });

            });

 

 

 

 

 

可省略(用于传输大图片)
打开项目中的Web.conflg添加以下代码:
  <!--配置 post 参数的 传输数据大小-->

  <appSettings>

    <add key="aspnet:MaxJsonDeserializerMembers" value="150000" />

  </appSettings>

  <system.web.extensions>

    <scripting>

      <webServices>

        <jsonSerialization maxJsonLength="2147483644"/>

      </webServices>

    </scripting>

  </system.web.extensions>