В этой статье приведены примеры многократной загрузки и предварительного просмотра JS HTML5. Конкретный контент заключается в следующем
Основное приложение
1. Файлы HTML5 могут выбрать несколько файлов и получить несколько файлов
2. xmlhttprequest объект, отправьте запрос на передачу HTTP
3. Поместите каждый файл в FormData для передачи
4. Используйте readasdataurl, чтобы напрямую превратить содержание изображения в URL, поместите его в SRC тега IMG и генерируйте предварительные изображения.
HTML+CSS+JS CODE
<! Doctype html> <head> <meta http-eviv = "content-type" content = "text/html" charset = "utf-8"/> <title> тест html fileDeader </title> <style type = "text/css"> html, тело, заголовок, нижний колонтитул, div, ul, li, h1, h2, h3, h4, h5, h6, метка, вход, текстовый, P, Span, a {padding: 0; Margin: 0;} img {border: 0;} em, strong {font-weight: нормальный; Стиль Font: Normal;} ul {list-style: none;} h1, h2, h3, h4, h5, h6 {font-weight: normal; размер шрифта: 100%;} a, a: после {text-decoration: none;}. photo_wrap {clear: оба;}. Photo_wrap li {margin: 10px; Ширина: 150px; Float: Left;}. Photo_box {Height: 150px; Ширина: 150px; переполнение: скрыто; Положение: относительно;}. Photo_box .img1 {height: 150px;}. Photo_box .img2 {width: 150px;}. upload_result {height: 50px;}. Btn {position: относительно; Высота: 40px; Ширина: 100px; float: left;}. Btn {height: 40px; высота линии: 40px; Цвет: #fff; дисплей: блок; граница-радий: 3PX; Текст-альбом: Центр; фоновый цвет: #ff5581; / * Старые браузеры */ packy-image: -moz-linear-gradient (вверху, #fa7b9c 0%, #ff5581 100%); / * Ff3.6+ */ packy-image: -webkit-gradient (линейный, левый верх, левый нижний, цветовой стоп (0%,#fa7b9c), цветовой стоп (100%,#ff5581)); / * Chrome, Safari4+ */ fackge-image: -webkit-linear-gradient (вверху, #fa7b9c 0%, #ff5581 100%); / * Chrome10+, safari5.1+ */ facky-image: -o-linear-gradient (вверху, #fa7b9c 0%, #ff5581 100%); / * Opera 11.10+ */ facky-image: -ms-linear-градиент (вверху, #fa7b9c 0%, #ff5581 100%); / * IE10+ */ facking-image: линейный градиент (до внизу, #FA7B9C 0%, #FF5581 100%); / * W3c */ filter: progid: dximagetransform.microsoft.gradient (startColorStr = '#FA7B9C', EndColorStr = '#ff5581', gradientType = 0); / * IE6-8 */ Box-Shadow: 0 1px 0 Rgba (255, 255, 255, 0,3) вставка, 0 1px 2px rgba (0, 0, 0, 0,3);}. Btn_add_pic {ширина: 100px; позиция: абсолютно; Верх: 0; слева: 0;}. btn_upload {width: 100px; Покрас: 0 10px 10px; float: left;}. Btn: Hover, .btn_cur {background-color: #fb99b1; / * Старые браузеры */ packy-image: -moz-linear-gradient (вверху, #fb99b1 0%, #ff5581 100%); / * Ff3.6+ */ facky-image: -webkit-gradient (линейный, левый верх, левый нижний, цветовой стоп (0%,#fb99b1), цветовой стоп (100%, ## ff5581)); / * Chrome, Safari4+ */ fackge-image: -webkit-linear-gradient (вверху, #fb99b1 0%, #ff5581 100%); / * Chrome10+, safari5.1+ */ facky-image: -o-linear-gradient (вверху, #fb99b1 0%, #ff5581 100%); / * Opera 11.10+ */ facking-image: -ms-linear-gradient (вверху, #fb99b1 0%, #ff5581 100%); / * IE10+ */ facking-image: линейный градиент (до внизу, #fb99b1 0%, #ff5581 100%); / * W3c */ filter: progid: dximageTransform.microsoft.gradient (startColorStr = '#fb99b1', endColorStr = '#ff5581', gradientType = 0); / * IE6-8 */}. File_input_wrap {position: Absolute; Верх: 0; слева: 0; Ширина: 100px; Высота: 40px;}. file_input_wrap label {width: 100%; высота: 100%; дисплей: блок; непрозрачность: 0; Cursor: pointer;}. file_input_wrap input {opacity: 0; Фильтр: альфа (непрозрачность = 0);/*IE8 и ниже*/ позиция: абсолютно; Верх: 7px; Справа: 173px; курсор: указатель; Ширина: 95px;}. Photo_box .ICON_POS {Height: 20px; Ширина: 20px; дисплей: блок; позиция: абсолютно; Справа: 0; Внизу: 0;}. Photo_box .loading {Height: 10px; дисплей: блок; позиция: абсолютно; слева: 0; Внизу: 0; фоновая image: url (загрузка.gif);}. sucess_icon {founal-image: url (icons_01.png); Фоновая позиция: 0 0;}. ERROR_ICON {Founal-Image: url (icons_01.png); фоновая позиция: -20px 0;} </style> </head> <body> <div> <a id = "j_add_pic" href = "javascript :;"> Добавить изображение </a> <div> <input type = "file" id = "file" name = "file" accept = "image/*" id = "j_add_area"> </label> </div> </div> <a id = "j_upload" href = "javascript :;"> Запуск загрузки </a> <div id = "j_photo_wrap"> <ul> </ul> </div> </body> <script type = " src = "jQuery-1.7.2.min.js"> </script> <script type = "text/javascript"> var img_index = new Array (); function upload_img () {var j = 0; img (); Функция img () {// 1. Создать объект xmlhttprequest if (img_index.length> 0) {var SingleImg = img_index [j]; var xmlhttp; if (window.xmlhttprequest) {// ie7+, firefox, chrome, opera, safari xmlhttp = new xmlhttprequest; // Исправить, если для определенных конкретных версий ошибок браузера Mozillar (xmlhttp.OverrideMimeType) {xmlhttp.OverrideMimeType ('text/xml'); }; } else if (window.activexobject) {// ie6, ie5 xmlhttp = new activexobject ("microsoft.xmlhttp"); }; if (xmlhttp.upload) {// bare bar xmlhttp.upload.addeventlistener ("progress", function (e) {if (e.lengthcompatable) {var load_percent = (e.loaded /e.total) * 100; $ ('#j_photo_wrap ul li '). eq (j) .find ('. // 2. Функция обратного вызова // onreadystateChange - это функция дескриптора событий, называемая каждый раз, когда свойство BethodState меняется xmlhttp.onreadystatechange = function (e) {if (xmlhttp.readystate == 4) {if (xmlhttp.Status == 200) {var json = eval (' + xmlhttp.respons =') {var json = eval (' + xmlhttp.respons status. if (json.status == 1) {$ ('#j_photo_wrap ul li'). eq (j) .find ('. $ ('#J_photo_wrap ul li'). Eq (j) .find ('.. Загрузка'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). Addclass ('sucess_icon'); } else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. $ ('#J_photo_wrap ul li'). Eq (j) .find ('.. Загрузка'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). Addclass ('error_icon'); }} else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. $ ('#J_photo_wrap ul li'). Eq (j) .find ('.. Загрузка'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('.. Загрузка'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). Addclass ('error_icon'); } if (j <img_index.length - 1) {j ++; img (); }}}}; // 3. Установите информацию об подключении // инициализировать параметры HTTP -запроса, но не отправляйте запросы. // Первый метод подключения параметра - это второй - адрес URL -адреса, а третье True - это асинхронное соединение, которое асинхронно по умолчанию // Отправить данные с использованием метода post xmlhttp.open («post», «upload.php», true); // 4. Отправьте данные, начните взаимодействовать с сервером // Отправить http -запросы, используйте параметры, передаваемые методу Open (), и необязательный запрос, переданный в метод. Если true, отправка предложения будет выполнена немедленно // Если она неверно (синхронная), отправка будет выполнена только после того, как данные сервера возвращаются // Метод получения не требует содержания в Send var formData = new FormData (); FormData.Append («FileData», SingleImg); xmlhttp.send (formdata); } //}}}}; $ ('#J_upload'). Click (function () {opload_img ();}); $ ('#J_add_area'). Hover (function () {$ ('#j_add_pic'). Addclass ('btn_cur');}, function () {$ ('#j_add_pic'). Removeclass ('btn_cur');}); $ ('#J_add_area'). Click (function () {$ ('#file'). Click ();}); Функция RESIZE (img) {if (img.Offsetheight> img.offsetWidth) {$ (img) .RemoveClass ('img1'). addClass ('img2'); } else {$ (img) .RemoveClass ('img2'). addClass ('img1'); }} функция fileInfo (source) {var ireg =/image//.*/i; var files = source.files; имя var, размер, тип; for (var i = 0, f; f = files [i]; i ++) {name = f.name; size = f.size; type = f.type; if (! type.match (iReg)) {$ ('#J_PHOTO_WRAP UL'). Append ('<li> <div>'+name+'не является изображением <pan> </span> <pan> </span> </div> <div> </div> </li>'); } else {img_index.push (f); if (size> 1048576) {$ ('#J_PHOTO_WRAP UL'). Append ('<li> <div>'+name+'слишком велик, чтобы генерировать предварительный просмотр <pan> </span> <pan> </span> </div> <div> </div> </li>'); } else {if (window.filereader) {var fr = new fileReader (); fr.onload = (function (f) {return function (e) {$ ('#j_photo_wrap ul'). append ('<li> <div> <img onload = "resize (this);" src = "'+this.Result+'"/> <pan> </span> <pan> </span> <div> </div> </li>; fr.readasdataurl (f); }}}}}}}; </script> </html>PHP получил код файла (здесь получает только имя файла, тип и размер, и другие операции не выполняются)
<? php $ name = $ _files ['filedata'] ['name']; $ type = $ _files ['filedata'] ['type']; $ size = $ _files ['filedata'] ['size']; $ return = array ("name" => $ name, "type" => $ type, "size" => $ size, "status" => 1); $ return = json_encode ($ return); echo $ return;?>Существующие проблемы
1. Чтобы сгенерировать миниатюры, REASTASDataurl займет память при чтении содержимого файла, поэтому большие изображения приведут к застрявшему или сбою браузера.
2. Загрузка не обрабатывается в сегментации
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.