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});
                }
            }
        });//]]>

这阻碍了我的完整表单提交，因此我将其更改为Below功能。

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()”在“button”上设置的“onclick”功能上传。

但是PHP在upload.php

中给出了“未定义的索引myfile”错误

搜索了一段时间后，我发现request payload中有“formdata”和header选项。

在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编码的字符串。服务器端，您需要使用base64_decode($yourimagedatastring);

解码此字符串

上传不适用于Jquery xhr＆amp;阿贾克斯

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

1 个答案: