尝试使用HTML5和ajax上传文件

时间:2013-12-09 17:07:15

标签: javascript php jquery ajax html5

我一直在尝试使用ajax上传一个漂亮的文件,从SO上的很多项目我已经能够按如下方式完成框架: 我的HTML:

    <form enctype="multipart/form-data" method="post">
<input name="file" type="file" />
<input type="button" value="Upload" />

非常直接。

我的PHP storeSales.php

    if ($_FILES["file"]["name"] != NULL) { 
if (file_exists("accounting/" . $_FILES["file"]["name"])){
echo $_FILES["file"]["name"] . " already exists. ";
}else{
move_uploaded_file($_FILES["file"]["tmp_name"], "accounting/" . $_FILES["file"]["name"]);
}
}
$file = fopen($_FILES['myfile']['name'],'r') or die('cant open file');

和我的.js:

    $(":button").click(function(){
var formData = new FormData($('form')[0]); if (formData !=null) {
alert("Got the file");
} else {
alert("nothing Here"); 
}

$.ajax({
    url: 'storeSales.php',  //Server script to process data
    type: 'POST',
    xhr: function() {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ // Check if upload property exists
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
        }
        return myXhr;
    },
    //Ajax events

    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').attr({value:e.loaded,max:e.total});
}
}

当我尝试上传文件时,我在我的.js文件中收到“获取文件”的警告但在php代码中我收到错误,即文件不能为空。从我能找到的一切,我以为我正在正确地做PHP。处理这个问题的正确方法是什么?我错过了别的什么吗?

1 个答案:

答案 0 :(得分:2)

你不能使用ajax上传文件 - 这是一个非法操作(通过干Ajax路由),没有第三方脚本。简而言之,您无法通过Ajax传递$_FILES数据。仅限$_POST个数据。你需要找一个插件。

尝试 上传http://www.uploadify.com/

相关问题