Jquery.form.js 上传图片-优快云博客

本文链接：https://blog.youkuaiyun.com/u013223198/article/details/73863242

本文介绍了一个使用HTML和JavaScript实现的图片上传功能，包括文件类型的验证及通过Ajax进行异步提交的过程。同时展示了后端API如何接收文件并保存到指定路径的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:
 <form id="formDemo" method="post" enctype="multipart/form-data" style="float: right">
                                <label style="position: relative; float:right">
                                    <img src="../img/xj.png" style="float: right;">
                                    <input type="file" capture="camera" name="Filedata" accept="image/gif,image/jpeg,image/jpg,image/png" class="sui-btn btn-success txt inputat" style="position: absolute; left: 0; width: 100px; opacity: 0;" onchange="forward_data.Post.UploadFile(this)" />
                                </label>
                            </form>

JS:
function UpdateUserInfo() {
    var filepath = $("input[name='Filedata']").val();
    var extStart = filepath.lastIndexOf(".");
    var ext = filepath.substring(extStart, filepath.length).toUpperCase();
    if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
        alert("图片限于bmp,png,gif,jpeg,jpg格式");
        return false;
    }
    $("#formDemo").ajaxSubmit({
        url: 'http://115.28.160.143:8082/api/Image/UpLoadImage?upPath=wxImage', /*设置post提交到的页面*/
        type: "post", /*设置表单以post方法提交*/
        /* 后端自定义头部验证，可去掉  */
        headers:
        {
            Authorization: "Bearer " + token,
            cmpCode: xr_user.CmpCode,
            userCode: xr_user.Eno,
        },
        dataType: "json", /*设置返回值类型为文本*/
        success: function (data) {
            imgs.push(data.Data);
            alert(JSON.stringify(imgs));
            forward_data.Entity.MyVue.$data.Imgs = imgs;
            alert(JSON.stringify(forward_data.Entity.MyVue.$data.Imgs));
        },
        error: function (error) {
            alert(error);
        }

    });
}

API:
public OperationResultModel UpLoadImage(string upPath)
        {
            var returnResult = new OperationResultModel() { ErrorMsg = string.Empty };

            try
            {

                var file = HttpContext.Current.Request.Files["Filedata"];

                string returnPath = string.Empty;

                if (file != null)
                {
                    string uploadPath = System.Web.Hosting.HostingEnvironment.MapPath("~/" + upPath) + "/";
                    // Server.MapPath(upPath) + "\\";// Server.MapPath("/UploadImgs") + "\\";


                    string fileName = file.FileName;

                    if (!Directory.Exists(uploadPath))
                    {
                        Directory.CreateDirectory(uploadPath);
                    }
                    file.SaveAs(uploadPath + fileName);


                    returnPath = ConfigTool.GetAppSetting("webSite") + "/" + upPath + "/" + fileName;
                }
                else
                {
                    throw new Exception("未找到上传文件");
                }

                returnResult.Data = returnPath.Trim('"');

            }

            catch (Exception ex)
            {
                LogManager.WriteErrorLog("上传图片", ex);

                returnResult.OpResult = "N";
                returnResult.ErrorMsg = ex.Message;

            }
            finally
            {

            }
            return returnResult;
        }