通过ajax将文件上传到服务器

时间:2013-11-15 08:36:46

标签: javascript jquery ajax html5 upload

我正在尝试通过这个简单的代码将图像上传到服务器:

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

<script>
$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'http://cs418417.vkontakte.ru//upload.php?act=do_add&mid=219171498&aid=179524586&gid=0&hash=154ebcc2f733f318a20b77e296f285c5&rhash=e7df1f0c685b918ffa58ff10937dc7cd&swfupload=1&api=1',  //Server script to process data
        type: 'POST',
        dataType: "jsonp",
        xhr: function() {  
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ 
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});
function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}
</script>

此代码不起作用。控制台显示我的错误: enter image description here

问题出在哪里?提前致谢,对不起我的英语!

1 个答案:

答案 0 :(得分:1)

服务器返回JSON字符串,但您的代码选择将其作为JSONP接收。执行JSON字符串将导致该错误。

enter image description here