zoukankan      html  css  js  c++  java
  • 十六、ajax上传图片 mvc

    一、ajax上传图片 mvc

    前台html

          <img id="uploadimg1" class="uploadimg" src="~/Content/img/sctp.png" width="60" height="60" />
                    <input type="file" id="inputimg" name="img_file" style="display:none">
                    <div id="uploadimg" class="uploadPhoto" onclick="uploadPhoto()">
                        +
                    </div>

    js 上传成功返回url给img

     function uploadPhoto() {
            document.querySelector('#inputimg').value = null;
            $("#inputimg").click();
        }
     
        document.getElementById("inputimg").addEventListener("change", function (e) {
            var formData = new FormData();
            formData.append("file1", document.getElementById("inputimg").files[0]);
            $.ajax({
                url: "/PersonalCenter/UpLoadProcess",
                type: 'POST',
                data: formData,
                async: false,
                contentType: false,
                processData: false,
                success: function (msg) {
                    if (msg.error == 0) {
                        $("#uploadimg1").attr("src", msg.message);
                        $("#uploadimg1").attr("data-imgurl", msg.message);
                    }
                },
                error: function (msg) {
                    alert(msg.error);
                }
            });
        })

    c# mvc后台接收

       /// <summary>
            /// 上传图片
            /// </summary>
            public ActionResult UpLoadProcess(HttpPostedFileBase imgFile)
            {
     
                Hashtable hash = new Hashtable();
                if (Request.Files.Count <= 0)
                {
                    hash = new Hashtable();
                    hash["error"] = 1;
                    hash["message"] = "请选择文件";
                    return Json(hash);
                }
                imgFile = Request.Files[0];
                string fileTypes = "gif,jpg,jpeg,png,bmp";
                int maxSize = 10 * 1024 * 1024;
                string fileName = imgFile.FileName;
                string fileExt = Path.GetExtension(fileName).ToLower();
                if (imgFile.InputStream == null || imgFile.ContentLength > maxSize)  //file.InputStream.Length > maxSize ||
                {
                    hash = new Hashtable();
                    hash["error"] = 1;
                    hash["message"] = "上传文件大小超过限制";
                    return Json(hash);
                }
     
                if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
                {
                    hash = new Hashtable();
                    hash["error"] = 1;
                    hash["message"] = "上传文件扩展名是不允许的扩展名";
                    return Json(hash);
                }
     
                string filePathName = string.Empty;
                string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Resource");
                if (Request.Files.Count == 0)
                {
                    return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
                }
                string ex = Path.GetExtension(imgFile.FileName);
                filePathName = Guid.NewGuid().ToString("N") + ex;
                if (!System.IO.Directory.Exists(localPath))
                {
                    System.IO.Directory.CreateDirectory(localPath);
                }
                imgFile.SaveAs(Path.Combine(localPath, filePathName));
                return Json(new
                {
                    error = 0,
                    message = "/Resource" + "/" + filePathName
                });
     
            }
  • 相关阅读:
    Maximum Depth of Binary Tree
    Single Number
    Merge Two Sorted Lists
    Remove Nth Node From End of List
    Remove Element
    Remove Duplicates from Sorted List
    Add Two Numbers
    编译视频直播点播平台EasyDSS数据排序使用Go 语言 slice 类型排序的实现介绍
    RTMP协议视频直播点播平台EasyDSS在Linux系统中以服务启动报错can’t evaluate field RootPath in type*struct排查
    【解决方案】5G时代RTMP推流服务器/互联网直播点播平台EasyDSS实现360°全景摄像机VR直播
  • 原文地址:https://www.cnblogs.com/fger/p/11101022.html
Copyright © 2011-2022 走看看