Загрузка изображения, предварительный просмотр и удаление изображения

внешний интерфейс JavaScript Ajax jQuery

задний план

Два дня назад я оставлял отзыв на веб-сайте для ПК, который включал функцию загрузки изображений, требующую, чтобы можно было загружать несколько изображений, а также поддержку предварительного просмотра загрузки и удаления изображений. Загрузка изображений никогда не делалась раньше, и такая потребность редко встречается, поэтому при выполнении этой функции я ссылаюсь на множество онлайн-кодов. Теперь буду вести отдельный блог, чтобы записывать весь процесс реализации и некоторые ямки, встречающиеся в процессе ее выполнения.

Давайте посмотрим на окончательный эффект:

Сначала создайте div для отображения изображения предварительного просмотра и кнопки загрузки, content-img-list используется для динамического отображения изображения предварительного просмотра, а файл используется для отображения кнопки загрузки.

<div class="content-img">
        	<ul class="content-img-list">
        		<!-- <li class="content-img-list-item"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><a class="delete-btn"><i class="ico-delete"></i></a></li> -->
        	</ul>
        	<div class="file">
        		<i class="ico-plus"></i>上传图片，支持jpg/png<input type="file" name="file" accept="image/*" id="upload" >
        	</div>	
        </div>

Украшение кнопки загрузки

Кнопка загрузки типа ввода по умолчанию = файл очень уродливая.Чтобы реализовать собственный стиль кнопки загрузки, здесь в основном устанавливается непрозрачность, устанавливая прозрачность ввода: 0;

Этапы реализации загрузки изображений

загрузить изображение

Отслеживайте событие изменения ввода через jquery, чтобы мы могли получить информацию о загруженном потоке изображения, чтобы мы могли получить адрес, размер, формат и имя изображения и другую информацию.

Здесь создаются три массива: imgName, imgSrc, imgFile используются для хранения имени, URL-адреса и информации о потоке загруженного изображения соответственно.

var fileList = this.files;
		for(var i = 0; i < fileList.length; i++) {
			var imgSrcI = getObjectURL(fileList[i]);
			imgName.push(fileList[i].name);
			imgSrc.push(imgSrcI);
			imgFile.push(fileList[i]);
		}

Метод getObjectURL — это адрес, используемый для получения локального изображения, и изображение может отображаться с использованием этого URL-адреса.

function getObjectURL(file) {
	var url = null ;
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}

Контролируйте размер загружаемого изображения, формат и количество загрузок

	$('#upload').on('change',function(){		
		  if(imgSrc.length==4){
			return alert("最多只能上传4张图片");
		}
		var imgSize = this.files[0].size;  //b
		if(imgSize>1024*1024*1){//1M
			return alert("上传图片不能超过1M");
		}
		if(this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif'){
			return alert("图片上传格式不正确");
		}
	})

Предварительный просмотр изображения

Создайте метод addNewContent для динамического отображения добавленного изображения для предварительного просмотра изображения и вызывайте этот метод каждый раз при загрузке изображения.

function addNewContent(obj) {
	$(obj).html("");
	for(var a = 0; a < imgSrc.length; a++) {
		var oldBox = $(obj).html();
		$(obj).html(oldBox + '<li class="content-img-list-item"><img src="'+imgSrc[a]+'" alt=""><a index="'+a+'" class="hide delete-btn"><i class="ico-delete"></i></a></li>');
	}
}

удаление изображения

1. Отобразите кнопку удаления изображения, отслеживая событие наведения мыши.

$('.content-img-list').on('mouseover','.content-img-list-item',function(){
		$(this).children('a').removeClass('hide');
	});

2. Прослушайте событие mouseleave мыши и скройте кнопку удаления изображения.

$('.content-img-list').on('mouseleave','.content-img-list-item',function(){
		$(this).children('a').addClass('hide');
	});

3. Получите атрибут нижнего индекса изображения, удалите элементы массива с помощью метода splice js и снова вызовите метод addNewContent, чтобы пройти по массиву изображений и отобразить изображение для предварительного просмотра.

$(".content-img-list").on("click",'.content-img-list-item a',function(){
	    	var index = $(this).attr("index");
			imgSrc.splice(index, 1);
			imgFile.splice(index, 1);
			imgName.splice(index, 1);
			var boxId = ".content-img-list";
			addNewContent(boxId);
			if(imgSrc.length<4){//显示上传按钮
				$('.content-img .file').show();
			}
	  });

загрузка изображения

Здесь FormData в основном используется для сбора параметров данных и отправки их в фоновом режиме.

var formFile = new FormData();

Пройдите массив потока изображений imgFile и соберите его в FormData

 $.each(imgFile, function(i, file){
            formFile.append('myFile[]', file);
        });

добавить другие параметры

    formFile.append("type", type); 
        formFile.append("content", content); 
        formFile.append("mobile", mobile);

Наконец, отправьте контент с помощью ajax

 $.ajax({
            url: 'http://zhangykwww.yind123.com/webapi/feedback',
            type: 'POST',
            data: formFile,
            async: true,  
            cache: false,  
            contentType: false, 
            processData: false, 
            // traditional:true,
            dataType:'json',
            success: function(res) {
                console.log(res);
            }
        })

Вышеупомянутое реализует функции загрузки изображения, предварительного просмотра изображения и удаления изображения.

Яма, обнаруженная в процессе реализации

1. Решите проблему, из-за которой одно и то же изображение не может быть загружено, когда входной файл загружает изображение. Если это одно и то же изображение, событие onChange будет запущено только один раз. Очистить значение элемента в onChange

document.querySelector('#uploader-get-file').value = null

Также this.value = null;

$('#upload').on('change',function(){//图片上传
        this.value = null;//解决无法上传相同图片的问题
})

2. Используйте formData для загрузки массива файлов тремя способами (см. https://segmentfault.com/q/1010000009622562)

方式1：
$.each(getImgFiles(), function(i, file){
    formData.append('files', file);
});
方式2：
$.each(getImgFiles(), function(i, file){
    formData.append('files[]', file);
});
方式3：
$.each(getImgFiles(), function(i, file){
    formData.append('files_' + i, file);
});

3.jquery устанавливает атрибут ajax

processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false,// 告诉jQuery不要去设置Content-Type请求头

Ткните меня, чтобы посмотреть демо онлайн

Я загрузил полный код вGitHub.com/Buddha Zero/Гибискус, ох ты…, вы можете нажать, чтобы посмотреть, если вы думаете, что это неплохо, не забудьте поставить звездочку!

Добавить Автора Отказ от ответственности: Оригинал статьи, пожалуйста, указывайте источник для перепечатки, спасибо!блог woo woo woo.cn on.com/fo zero/afraid/88…
Теги: ввод, файл, загрузка изображения

Категории