.net利用ajax技术实现图片上传并回显到界面

最近在开发过程中遇到了一个非常郁闷的问题，就是图片传到fileUpload中时想要实现回显到image控件中。

在前台，fileUpload.change()事件中判断fileUpload.val()不为空，把改路径值赋给image.attr("src",$('#fileUpload的ID').val())，

IE和火狐都无法实现，反而2345王牌浏览器可以实现读取本地路径的功能，

再用ajax异步调用函数，获取本地路径后再返回本地路径，同样无法实现，估计是跟浏览器的权限有关。

那么重点开始了，现在采用其他思路试试吧。

先来给fileUpload的change事件绑定一个upload的javascript函数，

//上传照片
        function upload() {
            var u = "";
            var options = {
                url: "../services/upload.ashx",//处理程序路径
                type: "post",success: function (msg) {//回调函数--请求成功
                    if (msg.toString().substring(0,3) == "ERR") {//
                        alert(msg.substring(3,msg.length));
                    }
                    else {
                        $("#img_tx").attr("src",msg);//回显图片
                    }
                },error:function(err){
                    alert("123");
            }
            };
            //将options传给ajaxForm
            $('#form1').ajaxSubmit(options);
        }

在这个函数中，我们调用了upload.ashx处理程序，该程序实现代码如下：

因为这里采用Session传递文件名，所以一定要引用IRequiresSessionState接口

同时添加下面三个引用

using System.Drawing;

using System.Web.SessionState;

using System.Web.Services;

public class upload : IHttpHandler,IRequiresSessionState

    {

       
        /// <summary>
        /// 上传照片
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            HttpFileCollection files = context.Request.Files;
            string path = "";//照片路径
            bool errorflag = true;
            string tishi = "";
            if (files.Count > 0)//Form中获取文件对象
            {
                HttpPostedFile file = files[0];
                if (file.ContentLength > 0)//文件大小大于零
                {
                    string fileName = file.FileName;//文件名
                    int fileSize = file.ContentLength;//文件大小
                    if (fileName.Substring(fileName.Length - 4,4).ToLower() == ".jpg")//只支持.jpg文件上传
                    {
                        try
                        {
                            Bitmap bitmap = new Bitmap(file.InputStream);//获取图片文件
                            if (bitmap.Width > 480 || bitmap.Height > 640)
                            {
                                errorflag = false;
                                tishi = "照片太大，请将照片调整为320*240像素尺寸！";
                            }
                            if (bitmap.Width < 120 || bitmap.Height < 160)
                            {
                                errorflag = false;
                                tishi = "照片太小，请将照片调整为320*240像素尺寸！";
                            }
                            if (bitmap.Width > bitmap.Height)
                            {
                                errorflag = false;
                                tishi = "照片的宽度比不符合要求，请将高度比调整为4:3！";
                            }
                            if (fileSize > 100 * 1024)
                            {
                                errorflag = false;
                                tishi = "照片的大小不符合要求，请将照片调整为100kb以内！";
                            }
                        }
                        catch
                        {
                            errorflag = false;
                            tishi = "照片错误，上传文件非图像文件！";
                        }
                    }
                    else
                    {
                        errorflag = false;
                        tishi = "照片格式错误，请上传JPG格式照片文件！";
                    }
                }
            }
            else
            {
                errorflag = false;
                tishi = "照片错误，上传照片文件为0字节！";
            }
            if (errorflag)
            {
                string extension = ".jpg";
                context.Session["zpname"] = Guid.NewGuid().ToString();//创建唯一文件名
                path = "../zhaopian/" + context.Session["zpname"].ToString() + extension;//指定保存路径以及文件名，也就是完整相对路径
                files[0].SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));//保存文件（将相对路径转化为绝对路径）
                context.Response.Write(path);//相应给客户端该照片的相对路径

            }
            else
            {
                context.Response.Write("ERR" + tishi);
            }

        }

<span style="font-size:24px;background-color: rgb(255,102,102);"><strong>到这里，我们已经能够实现当用户选择路径之后回显到界面的功能了。</strong></span>

下面附加一个功能模块，将照片以及用户修改的信息添加到数据库中。

首先，看一下前台是如何使用ajax调用后台函数的：

<pre class="html" name="code">//Document.ready()
        $(function () {
             //保存用户修改信息
            $('#b_xgxx').click(function () {
                var upzp = false;//默认不上传照片
                if ($('#fu_tx').val() != "") {//如果fileUpload有路径，就指定上传照片
                    upzp = true;
                }
                $.ajax({
                    url: "../services/WebService.asmx/modify_ZJXX",type: "post",contentType: "application/json;charset=utf-8",dataType: 'json',async: false,data: "{xm:'"+$('#t_xm').val()+"',sclydm:'"+$('#t_sclydm').val()+"',zhwt:'"+$('#t_zhwt').val()+"',zjjs:'"+$('#t_zjjs').val()+"',upzp:"+upzp+"}",success: function (response) {
                        if (response.d != "") {
                            alert(response.d);
                        }
                    },error:function(err){
                        alert(err);
                }
                })

            });

在提交按钮按下事件中，首先判断fu_tx是否有值，如果有就上传照片，如果没有，就不用上传照片，只上传其他信息

然后，看一下后台modefy_ZJXX函数的写法：

<p>[WebMethod(EnableSession = true)]
 public string modify_ZJXX(string xm,string sclydm,string zhwt,string zjjs,bool upzp)
 {
 Model.T_ZHUANJIA model = (Model.T_ZHUANJIA)Session["ZJXX"];
 string tishi = "";
 if (upzp == true)
 {
 //获取图片信息
 if (Session["zpname"].ToString().Trim() == "")
 {
 tishi = "请选择需要上传的照片";
 }
 else
 {
 //获取绝对路径
 string path = Server.MapPath("~/web/zhaopian/" + Session["zpname"].ToString() + ".jpg");
 //读取照片文件
 FileStream fs = new FileStream(path,FileMode.Open,FileAccess.Read);
 Byte[] bytes=new byte[fs.Length];
 fs.Read(bytes,(int)fs.Length);
 fs.dispose();//释放资源
 fs.Close();//关闭文件流
 model.ZJTX = bytes;//给专家头像变量赋值
 File.Delete(path);//删除服务器中的图片文件</p><p> }
 }
 //获取修改的其他信息，并写入数据库
 model.XM = xm;
 model.SCLYDM = sclydm;
 model.ZHWT = zhwt;
 model.ZJJS = zjjs;
 BLL.B_ZHUANJIA.UpdateZhuanJia(model,out tishi);//插入数据库中
 return tishi;
 
 }</p><p>其中有部分变量未说明，这里只做主要思路的介绍，一些无关的变量可以不用考虑。</p>