UploadFile图片上传案例

UploadFile图片上传案例

实现效果

点击上传图片按钮弹出一个窗口，选择图片路径，点击上传按钮上传成功

HTML

<div id="WGHSupervisorInfoImage" class="easyui-window" modal="true" title="展示图片" closed="true" style="width:690px;height:400px;padding:5px;background: #fff;">
  <div class="easyui-layout" fit="true">
    <div region="north" border="false">
            <label>图片展示</label>
        </div>
           <div region="center" border="false" style="padding:5px;background:#fff;border:1px solid #ccc;">
    <div style="background:#efefef;padding:5px;width:650px;">
		<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-add" onclick="open_WGHSupervisorInfoImageWindow()">上传图片</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-remove" onclick="del_WGHSupervisorInfo_image()">删除图片</a>
	</div>
    
    <div id="WGHSupervisorInfoImage_Panel" class="easyui-panel" style="width:663px; height:310px; margin-top:5px;">
        <ul>
        </ul>
    </div>
    </div>
</div>
</div>
<div id="WGHSupervisorInfoImageWindow" class = "easyui-window" title = "添加图片" closed="true" modal="true" iconCls="icon-save" style="width:400px;height:300px;padding:5px;background: #fff;">
    <div class = "easyui-layout" fit="true">
        <div region="center" border="false" style="padding:5px;background:#fff;border:1px solid #ccc;">
      
            <form id="formFile">
            <table width="350px;">
                <tr>
                    <td>
                        <input type="file" id="file_Img" name="file_Img" style="width: 300px" />
                    </td>
                    </tr>
                    <tr style="line-height:30px;">
                    <td valign="middle">
                        <a href="#" onclick="UploadFile()">上传</a>|<a href="#" onclick="CloseUploadFile()">取消上传</a>
                    </td>
                </tr>
            </table>
            </form>
        
        </div>
    </div>
</div>
//点击放大图片
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:999999;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>

JS

//点击图片
 function GetSelectSupervisorInfoImage(obj) {
        $('#WGHSupervisorInfoImage ul li').css('background-color', '');
        $(obj).css('background-color', 'Gray');
        selectImg = obj;
        if ($(selectImg).find('img').length > 0) {
            lookImg("#outerdiv", "#innerdiv", "#bigimg", $(selectImg).find('img')[0].src);
        }

    }
    //放大图片
    function lookImg(outerdiv, innerdiv, bigimg, src) {
        $(bigimg).attr("src", src); //设置#bigimg元素的src属性  

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width(); //获取当前窗口宽度  
            var windowH = $(window).height(); //获取当前窗口高度  
            var realWidth = this.width; //获取图片真实宽度  
            var realHeight = this.height; //获取图片真实高度  
            var imgWidth, imgHeight;
            var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  

            if (realHeight > windowH * scale) {//判断图片高度  
                imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放  
                imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度  
                if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度  
                    imgWidth = windowW * scale; //再对宽度进行缩放  
                }
            } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度  
                imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放  
                imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度  
            } else {//如果图片真实高度和宽度都符合要求，高宽不变  
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放  

            var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距  
            var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距  
            $(innerdiv).css({ "top": h, "left": w }); //设置#innerdiv的top和left属性  
            $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg  
        });

        $(outerdiv).click(function () {//再次点击淡出消失弹出层  
            $(this).fadeOut("fast");
        });

    }

    //删除图片
    function del_WGHSupervisorInfo_image() {
        if ($(selectImg).find('img').length > 0) {
            var Path;
            if ($(selectImg).find('img')[0].nameProp == undefined) {
                var List = $(selectImg).find('img')[0].src.split('/');
                Path = List[List.length - 1];
            }
            else {
                Path = $(selectImg).find('img')[0].nameProp;
            }
            $.post(
                "/Supervisor/DelSupervisorInfoImage",
                { SupervisorInfoId: $('#WGHSupervisorInfoDataPage').datagrid('getSelections')[0].Id, Path: Path },
                function (data, textStatus) {
                    if (textStatus == "success") {
                        $(selectImg).remove();
                        $('#WGHSupervisorInfoDataPage').datagrid('reload');
                        selectImg = null;
                    }
                },
                "json"
            );
        }
    }

//读取图片，图片可以是多张以列表的形式显示
    function GetPathList(obj) {
        $.post(
               "/Supervisor/GetPathList",
                {
                    Id: obj
                },
                function (data, textStatus) {
                    if (textStatus == "success") {
                        if (data.length > 0) {
                            $('#WGHSupervisorInfoImage_Panel ul').empty();
                       
                            for (var i = 0; i < data.length; i++) {
                              
                                var aa = "img" + (i + 1);
                              
                                var imgArry = data[i].img_path.split('/');
                              
                                $('#WGHSupervisorInfoImage ul').append("<li οnclick=\"GetSelectSupervisorInfoImage(this)\" ><img src='" + data[i].img_path + "' /></li>");
                            }

                        }
                    }
                },
                "json"
            );
    }
    //保存图片
    function UploadFile() {
        var Id = $("#WGHSupervisorInfoDataPage").datagrid('getSelections')[0].Id;
        $.ajaxFileUpload({
            url: '/Supervisor/UpdateLoad', //用于文件上传的服务器端请求地址
            secureuri: false, //一般设置为false，是否安全上传
            fileElementId: 'file_Img', //文件上传控件的id属性
            dataType: 'json', //返回值类型 一般设置为json 期望服务器传回的数据类型
            success: function (datas, status)  //服务器成功响应处理函数
            {
                if (typeof (datas.error) != 'undefined') {
                    if (datas.error != "") {
                        if (datas.error == "1") {
                            $.messager.alert("提示", "您上传的附件不符合格式");
                        }
                        else {
                            $.post(
                            "/Supervisor/SaveUploadFile",
                             {
                                 Id: Id, path: datas.ImgPath, FileName: datas.oldFileName
                             },
                             function (data, textStatus) {
                                 if (textStatus == "success") {
                                     if (data == "1") {
                                         GetPathList(Id);
                                         $('#WGHSupervisorInfoImageWindow').window('close');
                                         $.messager.alert('成功', '附件上传成功!');
                                         $('#WGHSupervisorInfoDataPage').datagrid('reload');
                                     }
                                     else {
                                         $.messager.alert("失败", "附件上传失败！");
                                     }
                                 }
                             },'json'
                            );
                        }
                    }
                }
             }, error: function (datas, status, e)//服务器响应失败处理函数
             {
                 $.messager.alert('提示', e, "info");
             }
        })

     }
 //关闭图片窗口
    function CloseUploadFile() {
        $('#formFile').form('clear');
        $('#WGHSupervisorInfoImageWindow').window('close');
    }

后台方法

//图片上传的路径
  public ActionResult UpdateLoad()
        {
            string error = "";//返回结果
            string msg = "";//状态
            string url = "";//保存的物理路径 

            //上传附件
            string newFileName = System.Guid.NewGuid().ToString();  //新的附件名称
            string ExtensionName = Path.GetExtension(Request.Files[0].FileName).ToLower();//扩展名小写
            string filename = Path.GetFileNameWithoutExtension(Request.Files[0].FileName);
            string[] filespli = filename.Split('/');
            string oldFileName = filespli[filespli.Length - 1];//Path.GetFileNameWithoutExtension(Request.Files[0].FileName); //获取文件名称

            if (ExtensionName != ".jpg" && ExtensionName != ".png" && ExtensionName != ".gif" && ExtensionName != ".bmp")
            {
                error = "1";
                msg = "上传失败,不允许上传以" + ExtensionName + "结尾的附件";
            }
            else
            {
                string ImgPath = Server.MapPath("/UploadImage/Wholesale/" + newFileName + ExtensionName);
                Request.Files[0].SaveAs(ImgPath);//上传
                url = "/UploadImage/Wholesale/" + newFileName + ExtensionName;
                error = "0";
            }
            string res = "{error:'" + error + "',msg:'" + msg + "',ImgPath:'" + url + "',oldFileName:'" + oldFileName + "'}";
            return Content(res);
        }

其他的后台方法自己写吧！！！！！！！！！