Question

在jquery中成功预览图像到我的服务器后，我无法上传图像。它显示文件未在form.append语句或操作中定义。

试图自己修复它，但找不到可行的解决方案。您能建议我还是帮助我呢？

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
        $('#imagePreview').css('background-image', 'url('+e.target.result +')');
        $('#imagePreview').hide();
        $('#imagePreview').fadeIn(650);
    }
    reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);

var formData = new FormData();
formData.append('formData', file);
$.ajax({
url: 'assets/uploadProfilepic.php',  //Server script to process data
type: 'POST',
data: formData,
contentType: false,
processData: false,
//Ajax events
success: function(html){
    alert(html);
}
});
});

HTML部分

<div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" name="file" />
            <label for="imageUpload"></label>
        </div>
        <div class="avatar-preview">
            <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
            </div>
        </div>
    </div>

未捕获的ReferenceError：文件未定义，但是应该定义，或者我不太了解

请有人可以帮助我或提供解决方案。谢谢和问候

Answer 1

变量file在回调so it will use file from global scope中没有定义的值，该变量的值为undefined。在严格模式下，accessing a variable which has not been declared in local scope raises an error。

请确保在您对readURL(this)的调用之下，file已分配给客户端发送的第一个文件（即this.files[0]）。并使用FormData s附加文件：

// The first argument ("file") is the POST key for the file
// The file metadata can be retrieved using $_FILES['file']

// The second argument is the file uploaded by the user
// The third argument is the name of the file as perceived by the server
var formData = new FormData();
formData.append("file", file, "avatar.png");

请记住，要上传文件（包括头像），该表单应使用属性enctype="multipart/form-data"，以便浏览器可以正确发送图像文件。

实现文件上传还不是全部；建议您在服务器端验证文件（对于PHP，可以使用mime_content_type函数，该函数需要 fileinfo 扩展名）。在执行任何操作之前，请阅读this page on POST file uploads。

可以在图像预览后自动将图像自动上传到服务器

1 个答案: