图片预览后自动上传图片到服务器

Question

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

我试图自己修复它，但找不到解决方案 works.Could 您建议我或帮助我，下面是一些代码。

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>

Uncaught ReferenceError: file is not defined but it should be or i don't really understand

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

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]）。并使用 FormDatas:

附加文件

// 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 function, which requires the fileinfo extension). Before doing anything, please read this page on POST file uploads.

图片预览后自动上传图片到服务器

Hot to upload image automaticaly after image preview to server

javascript

php

forms

jquery

image-uploading