javascript - 将图像上传到服务器(JQuery 库 + FormData)

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);

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