Горячая загрузка изображения автоматически после предварительного просмотра изображения на сервер - PullRequest
Новая
       14

Горячая загрузка изображения автоматически после предварительного просмотра изображения на сервер

0 голосов
/ 06 января 2019

У меня возникла проблема с загрузкой моего изображения после успешного предварительного просмотра изображения в 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>

Uncaught ReferenceError: файл не определен, но он должен быть, или я действительно не понимаю

Пожалуйста, кто-нибудь может мне немного помочь или дать решение. Спасибо и приветствуем

1 Ответ

0 голосов
/ 06 января 2019

Переменная file не имеет определенного значения в вашем обратном вызове, , поэтому она будет использовать file из глобальной области видимости , которая имеет значение undefined. В строгом режиме доступ к переменной, которая не была объявлена ​​в локальной области, вызывает ошибку .

Убедитесь, что чуть ниже вашего звонка на 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 ). Прежде чем что-либо делать, прочитайте эту страницу о загрузках POST-файлов .

...