使用ajax上传文件，没有任何第三方js [重复]

This question already has an answer here:

这个问题在这里已有答案:

Upload File With Ajax XmlHttpRequest 1 answer

使用Ajax XmlHttpRequest上传文件1回答

i just have input type file and want to move csv file without any third party js plugin ?

我只是有输入类型文件,并希望移动csv文件没有任何第三方js插件?

<input type="file" name="file" id="file" />
<input type="button" name="upload" id="upload" value="Upload" />

1 个解决方案

#1

You can use the FormData interface. Note that this doesn't work on IE lower than 10.

您可以使用FormData界面。请注意,这不适用于低于10的IE。

Here's a great tutorial on how to use it: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

这是一个关于如何使用它的好教程:http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

In short, you have to bind a change event on the file input to capture the selected file and on the form submit you'd create a new FormData object to which you'd append the file data previously saved.

简而言之,您必须在文件输入上绑定更改事件以捕获所选文件,并在表单提交上创建一个新的FormData对象,您可以将先前保存的文件数据附加到该对象。

// Variable to store your files
var files;

// Add events
$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
  files = event.target.files;
}

On form submit:

在表格提交上:

var data = new FormData();
$.each(files, function(key, value)
{
    data.append(key, value);
});

$.ajax({
    url: 'submit.php?files',
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            submitForm(event, data);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
        // STOP LOADING SPINNER
    }
});

#1