Javascript 上传不使用Jquery xhr&；AJAX

我的“表单”中有图像上传功能，可以通过ajax上传。所以，在上传图像之前，用户将继续填写表单的其余部分。然后单击submit按钮，这是另一个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});
                }
            }
        }

所以，每当用户点击“上传图像”按钮。图像将通过“

uploadimage（）

”功能上传，该功能设置在“

按钮”

”上，并带有事件“

onclick

”

但是

PHP

在

upload.PHP

搜索了一段时间后，我发现，

标题中有“
请求有效负载
”并且没有
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.

**

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

在my
uploadimage（）
函数中运行。
默认情况下，Ajax不支持二进制文件传输。我认为对图像进行base-64编码并将数据字符串发送到服务器更容易。您可以使用html5画布元素从图像
canvas.toDataURL（）中获取base-64编码的字符串。服务器端您需要使用
base64\u decode（$yourimagedatastring）对该字符串进行解码
不，你误解了我的意思。我的意思是我应该在哪里添加
xhr.setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）在我的函数中
uplpadimage（）
。
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");