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

Question

i got problem in order to upload my image, after sucessfull image preview in jquery to my server. It shows file is not defined in the form.append statement or action.

Tried to fix it on my own but couldn`t find a solution that works.Could you advice me or help me a little bit code is following.

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

The HTML Part

<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 dont really understand

Please someone could help me a little bit or give a solution. Thanks and Greets

Answer 1

The file variable has no defined value in your callback, so it will use file from global scope, which has value undefined. In strict mode, accessing a variable which has not been declared in local scope raises an error.

Be sure that just below your call to readURL(this) that file is assigned to the first file sent by the client (i.e. this.files[0]). And to append a file using the 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");

Keep it mind that to upload files (including avatars), the form should be using the attribute enctype="multipart/form-data", so that the browser can send properly the image file.

And implementing a file upload is not all; it is recommended that you validate the file server-side (with PHP, you can use the mime_content_type function, which requires the fileinfo extension). Before doing anything, please read this page on POST file uploads.