AJAX 上传图片(原生jquery)

之前都是用插件上传图片,这次试了下原生js(jquery) 上传

  1. 前端部分

<input type="file" id="file" placeholder="拍照图片" autocomplete="off" class="layui-input">
                    <button onclick="uploadFile()" type="button">提交</button>

js:

     function uploadFile() {
        let host = "";  //写自己的
        let data = {};
        let formData = {
            "Name": "",
            "FolderName": "Repair",
            "ProjectCode": "yyxt"
        };
        data = {
            "method": "UploadFile",
            "companyNo": "{:C('companyNo')}",
            "sign": "{:C('sign')}",
            "content": JSON.stringify(formData)
        };
        let fileData = new FormData();
        let name = $("#file").val();
        fileData.append("file", $('#file')[0].files[0]);  // 或者document.getElementById("file")[0]
        fileData.append("name", name);
        $.ajax({
            type: "post",
            url: host + '?data=' + JSON.stringify(data),
            // url: '',
            data:fileData,
            //ajax2.0可以不用设置请求头,但是jq帮我们自动设置了,这样的话需要我们自己取消掉
            contentType:false,
            //取消帮我们格式化数据,是什么就是什么
            processData:false,
            success: function(msg) {
                let res = JSON.parse(msg);
                if(res['ack'] == 'success'){
                    layer.msg("提交成功!", {"icon": 1})
                }
            },
            Error:function(data)
            {
            }
        });
    }

2.后端

php: $_FILES//接受

C#:

//获取文件            
HttpPostedFile upfile = context.Request.Files[0];
发布了33 篇原创文章 · 获赞 1 · 访问量 8314

猜你喜欢

转载自blog.csdn.net/u012914309/article/details/103125919