我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上载吗?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

如果可能,我需要填写数据部分吗?这是正确的方式吗?我只将文件POST到服务器端。

我一直在搜索,但我发现的是一个插件,而在我的计划中,我不想使用它。至少目前是这样。


当前回答

$(“#form id”).submit(函数(e){e.预防违约();});$(“#form id”).submit(函数(e){var formObj=$(此);var formURL=formObj.attr(“操作”);var formData=新的formData(this);$.ajax美元({url:formURL,类型:'POST',data:formData,processData:false,contentType:false,异步:true,缓存:false,enctype:“multipart/form data”,dataType:“json”,成功:函数(数据){if(data.success){警报(data.success)} if(data.error){警报(data.error)} }});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><form class=“form horizontal”id=“form id”action=“masterFileController”enctype=“multipart/form data”><button class=“btn success btn”type=“submit”id=“btn save”>提交</button></form>

servlet响应为“out.print(“您的响应”);”

其他回答

使用纯js更容易

异步函数saveFile(inp){let formData=新formData();formData.append(“file”,inp.files[0]);wait-fetch('/upload/somedata',{method:“POST”,body:formData});警报(“成功”);}<input-type=“file”onchange=“saveFile(this)”>

在服务器端,您可以读取请求中自动包含的原始文件名(和其他信息)。您不需要将标题“Content-Type”设置为“multipart/form-data”。浏览器将自动设置它此解决方案应适用于所有主要浏览器。

下面是更详细的代码片段,包括错误处理、超时和额外的json发送

异步函数saveFile(inp){让用户={name:'john',年龄:34};let formData=新formData();let photo=inp.files[0];formData.append(“照片”,照片);formData.append(“用户”,JSON.stringify(用户));const ctrl=新建AbortController()//超时setTimeout(()=>ctrl.art(),50000);尝试{let r=等待获取('/upload/image',{method:“POST”,body:formData,signal:ctrl.signal});console.log('HTTP响应代码:',r.status);警报(“成功”);}捕获(e){console.log('休斯顿我们有问题…:',e);}}<input-type=“file”onchange=“saveFile(this)”><br><br>在选择文件之前,打开chrome控制台>网络选项卡以查看请求详细信息。<br><br><small>因为在本例中,我们将请求发送到https://stacksnippets.net/upload/image响应代码当然是404</小>

使用XMLHttpRequest()确实可以进行AJAX上载。无需iframes。可以显示上载进度。

有关详细信息,请参阅:答案https://stackoverflow.com/a/4943774/873282对jQuery Upload Progress和AJAX文件上传提出质疑。

如果你想这样做:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

可能是您的解决方案。

可以,只需使用javascript获取文件,确保将文件作为数据URL读取。解析出base64之前的内容,以实际获得base64编码的数据,然后如果您使用php或任何后端语言,您可以解码base64数据并保存到如下所示的文件中

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);


PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

当然,你可能会想做一些验证,比如检查你正在处理的文件类型之类的事情,但这是一个想法。

要上载用户使用jquery作为表单一部分提交的文件,请遵循以下代码:

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

然后将表单数据对象发送到服务器。

我们还可以将文件或Blob直接附加到FormData对象。

data.append("myfile", myBlob, "filename.txt");