使用HTML5进行文件上传与阿贾克斯和jQuery [英] using html5 for file upload with ajax and jquery

问题描述

，所以我想上传图片以及表单数据到服务器。我用的FileReader API将图像转换为数据，并上传到服务器。我下面的code类似于<一href="http://stackoverflow.com/questions/4006520/using-html5-file-uploads-with-ajax-and-jquery">HTML5上传使用AJAX Jquery的。

So i am trying to upload an image along with form data to server. I'm using FileReader API to convert image to data and upload to server. I'm following the code similar to HTML5 uploader using AJAX Jquery.

的数据被转换在jquery的，但没有被发送到服务器，并且没有产生错误。

The data is converted in jquery, but nothing is being sent to server and there is no error generated.

$('#formupload').on('submit', function(e){
    e.preventDefault();
    var hasError = false;
    var file = document.getElementById('file').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = shipOff;

    function shipOff(event) {
        result = new Image(); 
        result.src = event.target.result;
        var fileName = document.getElementById('file').files[0].name; 
        $.post('test.php', { data: result, name: fileName });
    }

PHP code

PHP Code

<?php
$data = $_POST['data'];
$fileName = $_POST['name'];
echo $fileName;
$fp = fopen('/uploads/'.$fileName,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $fileName );
echo json_encode($returnData);
?>

该问题是由于大的图像文件或FileReader对象的API？

Is the problem due to large image file or FileReader API?

推荐答案

我不知道，如果文件上传作品filereaders，但有一个不同的方式，使其工作：

I'm not sure if file upload works with filereaders, but there is a different way to make it work:

var formData = new FormData($('.file_upload_form')[0]);
$.ajax({
    url: 'upload_file.php', //server script to process data
    type: 'POST',
    xhr: function() {  // custom xhr
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ // check if upload property exists
            // for handling the progress of the upload
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false); 
        }
        return myXhr;
    },
    success: function(result)
    {
        console.log($.ajaxSettings.xhr().upload);
        alert(result);
    },
    // Form data
    data: formData,
    //Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
});

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $("#progress").text(e.loaded + " / " + e.total);
    }
}

此方法将数据发送到PHP文件，你可以使用 $ _ FILES 来处理它。不幸的是，这并不能在IE浏览器，据我所知。有可能使这成为可能在IE中可用的插件，但我不知道任何人。

This way you send the data to the PHP file and you can use $_FILES to process it. Unfortunately, this does not work in IE as far as I know. There might be plugins available that make this possible in IE, but I don't know any of them.

这篇关于使用HTML5进行文件上传与阿贾克斯和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！