简单上载表单

<脚本>//表单提交$（“表单”）.submit（函数（evt）｛evt.preventDefault（）；var formData=新的formData（$（this）[0]）；$.ajax美元({url:'fileUpload'，类型：'POST'，data:formData，异步：false，缓存：false，contentType：false，enctype:'多部分/表单数据'，processData:false，成功：函数（响应）{警报（响应）；}});return false；});</script><!--上载表单--><表单><表><tr><td colspan=“2”>文件上载</td></tr><tr><th>选择文件</th><td><input id=“csv”name=“csv“type=“file”/></td></tr><tr><td colspan=“2”><input-type=“submit”value=“subject”/></td></tr></table></form>

如许多答案所示，使用FormData是一种方法。这里有一些代码非常适合这个目的。我也同意嵌套ajax块以完成复杂环境的意见。通过包括e.PreventDefault（）；根据我的经验，使代码更易于跨浏览器兼容。

    $('#UploadB1').click(function(e){        
    e.preventDefault();

    if (!fileupload.valid()) {
        return false;            
    }

    var myformData = new FormData();        
    myformData.append('file', $('#uploadFile')[0].files[0]);

    $("#UpdateMessage5").html("Uploading file ....");
    $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");

    myformData.append('mode', 'fileUpload');
    myformData.append('myid', $('#myid').val());
    myformData.append('type', $('#fileType').val());
    //formData.append('myfile', file, file.name); 

    $.ajax({
        url: 'include/fetch.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: myformData,
        enctype: 'multipart/form-data',
        success: function(response){
            $("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
            $("#UpdateMessage5").css("background","");

            console.log("file successfully submitted");
        },error: function(){
            console.log("not okay");
        }
    });
});

使用FormData。它工作得很好：-）。。。

var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit

$.ajax({
    url: '/your-form-processing-page-url-here',
    type: 'POST',
    data: jform,
    dataType: 'json',
    mimeType: 'multipart/form-data', // this too
    contentType: false,
    cache: false,
    processData: false,
    success: function(data, status, jqXHR){
        alert('Hooray! All is well.');
        console.log(data);
        console.log(status);
        console.log(jqXHR);

    },
    error: function(jqXHR,status,error){
        // Hopefully we should never reach here
        console.log(jqXHR);
        console.log(status);
        console.log(error);
    }
});

我想到了一个主意：

Have an iframe on page and have a referencer.

具有将输入类型文件元素移动到的表单。

Form:  A processing page AND a target of the FRAME.

结果将发布到iframe，然后您只需将获取的数据发送到所需的图像标签，如下所示：

data:image/png;base64,asdfasdfasdfasdfa

并加载页面。

我相信这对我来说是有效的，取决于你是否能够做到：

.aftersubmit(function(){
    stopPropagation(); // or some other code which would prevent a refresh.
});

使用隐藏的iframe并将表单的目标设置为该iframe的名称。这样，当提交表单时，只会刷新iframe。为iframe的加载事件注册一个事件处理程序，以解析响应。

要获取所有表单输入，包括type=“file”，需要使用FormData对象。提交表单后，您将能够在调试器->网络->标头中看到formData内容。

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});