Question

我已经阅读了此处已有的所有解决方案，但我没有在我的代码中发现问题。

HTML：

<div id='image-uploader-view'>
    <input type='text' id='rename' name='rename'/>
    <input id='fileupload' type='file' name='file'/>
    <a class='btn btn-primary''>UPLOAD FILE</>
</div>

JS：

    $('#image-uploader-view').on('click','a.btn',function(){
        var fileDOM = $(this).closest('#image-uploader-view').find('#fileupload'),
            renameDom = $(this).closest('#image-uploader-view').find('input#rename');

        if(fileDOM){
            var fileObject = $(fileDOM).get(0).files[0];

            var formData = new FormData();
                formData.append('file', fileObject, renameDom.val());

            $.ajax({
                url: '/php/uploads/index.php',
                type: 'POST',
                dataType: 'json',
                data: formData,
                cache: false,
                contentType: false,
                processData: false, 
                success: function(data, textStatus, jqXHR){
                    console.log(data);
                },
                error:function(jqXHR, textStatus, errorThrown){
                    console.log('ERRORS: ' + textStatus);
                }
            })
        }

点击输入按钮上传文件后，我选择了一个图像，并在屏幕上显示名称。然后，我尝试提交文件图像。

从控制台，检查我正在做的请求：

Request Payload
------WebKitFormBoundarynLOjMcIkFf7jCcRs
Content-Disposition: form-data; name="file"; filename=""
Content-Type: image/png


------WebKitFormBoundarynLOjMcIkFf7jCcRs--

没有文件名......为什么？我从成功回调中得到以下对象的响应：

{
   file: Object
   error: 4
   name: ""
   size: 0
   tmp_name: ""
   type: ""
   __proto__: Object
   __proto__: Object
}

我做错了什么？

Answer 1

我发现了这个问题......这与我在formData.append中所做的事情有关。

FormData接受以下参数：

void append(DOMString name, File value, optional DOMString filename);
void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

我正在测试没有任何文件名的代码，或者更好地说，文件名等于空字符串“”。在这种情况下没有上传任何内容。一旦我意识到这一点（删除第三个参数），我就将数据发送到服务器。

将图像上传到服务器（JQuery库+ FormData）

1 个答案: