使用ajax上传文件,没有任何第三方js

时间:2014-08-04 09:51:51

标签: php jquery ajax

我只有输入类型文件,想要在没有任何第三方js插件的情况下移动csv文件?

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

1 个答案:

答案 0 :(得分:0)

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

以下是有关如何使用它的精彩教程:http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

简而言之,您必须在文件输入上绑定更改事件以捕获所选文件,并在表单上提交您创建一个新的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;
}

表格提交:

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
    }
});