前端图片文件上传到服务器

以前ajax不能上传图片 现在有了formdata可以直接ajax上传

代码:

    <form action="DinoVoteHelper.ashx?action=upload" enctype="multipart/form-data" method="post" id="form" target="if">
                    <input style="display: none" id="sfzzm" type="file" name="file1" onchange="javascript:showpic(this,'sfzzmImg');" accept="image/*">
</form>
    <iframe id="if" name="if" style="display:none"></iframe>

js:

        //上传数据
        var formData = new FormData($("#form")[0]);
        $.ajax({
            url: 'DinoVoteHelper.ashx?action=upload',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                debugger
                alert(returndata);
            },
            error: function (returndata) {
                alert(returndata);
            }
        });  

后台:

 if (context.Request.Files.Count > 0)
                {
                    string filename = context.Request.Files[0].FileName;//获取文件名 
                    string[] temp = filename.Split('.');//获取文件后缀 
                    string path = "photo/DinoVote/" + my_model.id + "_" + DateTime.Now.ToString("MMddHHmmss") +"."+ temp[1];
                    string strPath = Path.Combine(basePath, path);
                    context.Request.Files[0].SaveAs(strPath);

                    hd_articlevote_images img = new hd_articlevote_images()
                    {
                        hd_code = DinoVoteManage.hd_code,
                        images = path,
                        article_code = my_model.id.ToString()
                    };
                    main_db.hd_articlevote_images.Add(img);
                    main_db.SaveChanges();
                }

图片转byte[]：

 

            string str = @"D:\1.png";
            //读文件
            FileStream fs = new FileStream(str, FileMode.Open, FileAccess.Read);
            BinaryReader by = new BinaryReader(fs);
            int length = (int)fs.Length;
            //转成byte[]
            byte[] imgbyte = by.ReadBytes(length);

 

 

 

 

 

把byte[]保存为图片类型（如果byte[]不正确则可能保存报错）

 

            //转成IO流
            MemoryStream ms = new MemoryStream(imgbyte);
            ms.Seek(0, SeekOrigin.Begin);
            //通过流生成图片
            Image image1 = Image.FromStream(ms);
            //保存
            image1.Save(@"D:\test.png");

 

 

图片上传到服务器(App POST传到后台)：

 

 

 

                string fPath = context.Server.MapPath("severphotes");  //服务器路径
                #region 上传头像
                if (!Directory.Exists(fPath))				//判断是否存在文件夹
                {
                    Directory.CreateDirectory(fPath);
                }

                TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);   //时间戳
                string name = Convert.ToInt64(ts.TotalSeconds).ToString() + ".png";     //图片名
                //if (!File.Exists(fPath + name))
                //{
                System.IO.Stream stream = context.Request.InputStream;		//得到传来的流
                byte[] buffer = new byte[stream.Length];
                FileStream fs = null;
                try
                {
                    fs = new FileStream(fPath + "//" + name, FileMode.Create);       //按照路径创建图片文件
                    while ((stream.Read(buffer, 0, buffer.Length)) > 0)
                    {
                        fs.Write(buffer, 0, buffer.Length);			//写入数据
                    }
                }
                catch (IOException ioe)
                {
                    context.Response.Write(ioe);
                }
                finally
                {
                    if (fs != null)
                    {
                        fs.Close();
                    }
                    stream.Close();
                }

 

Form表单提交（input控件添加图片）保存到服务器

 

1、

 

            System.Web.HttpFileCollection files = context.Request.Files;   //获取FORM表单提交的文件
            if (files.Count > 0)
            {
                System.Web.HttpPostedFile postedfile = files[0];
                Stream str = postedfile.InputStream;
                StreamReader streamReader = new StreamReader(str);
                byte[] bytes = new byte[1024];
                //地址名字
                TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
                string name = Convert.ToInt64(ts.TotalSeconds).ToString() + ".png";
                string fPath = "";
                string url = ""; 
                string tag = "";
                string imgName = "";
                if (files.AllKeys[0] == "icon")
                {
                    fPath = context.Request.MapPath("../../../severphotes");
                    url = ConfigurationManager.AppSettings["website"].ToString() + "severphotes/" + name;
                    tag = "severphotes/" + name;
                    imgName = "SF_ICON";
                }
                #region 保存图片方法
                FileStream fstr = new FileStream(fPath + "//" + name, FileMode.OpenOrCreate, FileAccess.Write);
                int len = 0;
                while ((len = str.Read(bytes, 0, 1024)) > 0)
                {
                    fstr.Write(bytes, 0, len);
                }
                streamReader.Dispose();
                str.Dispose();
                fstr.Flush();
                fstr.Close();
                #endregion
                context.Response.ContentType = "text/html";   //这种方式返回能调用JS
            }

2、自带Save：

 

System.Web.HttpFileCollection files = context.Request.Files;
            if (files.Count > 0)
            {
                TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
                string name = Convert.ToInt64(ts.TotalSeconds).ToString() + ".png";
                string tag = "image/forward/" + name;
                string url = ConfigurationManager.AppSettings["website"].ToString() + tag;
                HttpPostedFile hpFile = files[0];
                hpFile.SaveAs(context.Request.MapPath("../../../image/forward/" + name));
                context.Response.ContentType = "text/html";
                context.Response.Write("<script>parent.setPic('" + url + "','" + tag + "')</script>");       //在iframe中调用主页面的script需要加parent.
            }

 

HTML部分：

 

    function setPic(url, tag) {  //给图片赋值路径和tag属性，src是为了显示，tag是在数据库保存的相对路径
        $('#forwardImg').attr("src", url);
        $('#forwardImg').attr("tag", tag);
    }

    function upload() { //图片上传后提交form
        $('#form').submit();
    }

    function uploadImg() {  //控件模拟点击，也可以$("#img").click();
        document.getElementById('img').click();
    }

 

 <form target="filetarget" enctype="multipart/form-data" method="post" id="form" action="../dzxswebservice/ForwardService.ashx?action=updateImage">
     <div style="text-align:left;margin-top:40px;">
         <a onclick="uploadImg()">
             <i class="icon-shangchuan  iconfont"></i>
                 <input type="file" onchange="upload()" name="img1" id="img" style="display:none"/>上传图片
           </a>
     </div>
     <iframe name="filetarget" id="filetarget" style="display: none"></iframe>
  </form>

样式什么的可以不看，主要的是form、input、iframe、a标签

 

这里需要给form添加 enctype="multipart/form-data" 否则无法上传

这里第一次点击触发的是uploadImg方法，input就会显示选择文件，确认选择后则自动触发onchange事件提交。在后台可以限制文件大小。