上载无法与Jquery xhr和Ajax一起使用

Question

我的“表单”中有图像上传功能，该功能通过ajax上传。 因此，在图像上传之前，用户将继续填写剩余的表格。 然后点击“提交”按钮，这是另一个ajax功能来提交整个表单。

问题是我具有以下图像上传功能：-

jQuery(window).load(function(){
            jQuery(':button').click(function(){
                var formData = new FormData(jQuery('form')[0]);
                jQuery.ajax({
                    url: 'upload.php',  //Server script to process data
                    type: 'POST',
                    xhr: function() {  // Custom XMLHttpRequest
                        var myXhr = jQuery.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
                    beforeSend: function(e) { $('#progress').css('display', 'block'); },
                    success: function(e) {
                        if (e != "no" && e != 'dir') {
                            $('#img').attr("src", e);
                            $('#imglinktosent').val(e);
                        } else if (e == 'dir') {
                            alert('Oops! We could not find \image\ directory or may be permission is not correct');
                        } else {
                            alert('File was not Uploaded, Kindly Upload Image with Size less than 512KB');
                        }
                    } ,
                    error: function(e) { alert('error' + e.message); } ,
                    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});
                }
            }
        });//]]>

这阻碍了我完成表单提交，因此我将其更改为“以下函数”。

function uploadimage(){
            jQuery(':button').click(function(){
                var formData = jQuery('#myfile').val();
                jQuery.ajax({
                    url: 'upload.php',  //Server script to process data
                    type: 'POST',
                    xhr: function() {  // Custom XMLHttpRequest
                        var myXhr = jQuery.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
                    beforeSend: function(e) { $('#progress').css('display', 'block'); },
                    success: function(e) {
                        if (e != "no" && e != 'dir') {
                            $('#img').attr("src", e);
                            $('#imglinktosent').val(e);
                        } else if (e == 'dir') {
                            alert('Oops! We could not find \image\ directory or may be permission is not correct');
                        } else {
                            alert('File was not Uploaded, Kindly Upload Image with Size less than 512KB');
                        }
                    } ,
                    error: function(e) { alert('error' + e.message); } ,
                    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});
                }
            }
        }

因此，每当用户单击“上传图像”按钮时。 图像将通过“ button ”上设置的“ uploadimage() ”函数上传，并带有“ onclick ”事件。

但是PHP在upload.php给出了“未定义的索引myfile” upload.php

搜索了一会儿后，我发现“ header ”中有“ request payload ”并且没有formdata选项。

在stackoverflow中搜索更多之后，我发现我也必须指定此内容：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

就像您在第30行注意到的那样，我正在直接发送formData

data: formData,
//Options to tell jQuery not to process data or worry about content-type.

**

但是我不确定我应该在哪里指定

**

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

在我的uploadimage()函数中工作。

Answer 1

默认情况下，Ajax不支持二进制文件传输。 我认为对图像进行base-64编码和将数据字符串发布到服务器更容易。 您可以使用html5 canvas元素从图像canvas.toDataURL();获取以base-64编码的字符串canvas.toDataURL(); 。 服务器端需要使用base64_decode($yourimagedatastring);对该字符串进行解码base64_decode($yourimagedatastring);