JavaScript реализует файл выбора файла клиента и IMG TAG LOAD CLIENT Image для достижения предварительного просмотра изображения.
Испытательные браузеры: Firefox6, Firefox12, Chrome 25.0.1364.172 M, IE6-I10-все совместимы
Safari5.0.4 не поддерживает FileReader и File.files.item (0). GetAsDataurl. На данный момент нет решения. Вам нужно загрузить его на сервер, вернуть временное имя файла и загрузить его с помощью тега IMG. Я не знаю, поддерживает ли последующая версия Safari объекты FileReader.
IE10 эффект:
IE9 эффекты:
Реализуйте исходный код:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "txt/html; charset = utf-8"/> <Title> I. IE6 IS IE6. Судя по тому, что пользовательский агент не обязательно является точным if (document.all) document.write ('<!-[если lte ie 6]> <script type = "text/javascript"> window.ie6 = true <// script> <! [Endif]->'); // var ie6 =/msie 6/i.test (navigator.useragent); // не рекомендуется, некоторые системы 'IE6 пользовательский пользователь будет изменять функцию IE7 или IE8 (PICID, fileID) {var pic = document.getElementById (picid); var file = document.getElementbyId (fileId); if (window.filereader) {// chrome, firefox7+, opera, ie10, ie9, IE9 также может использовать фильтры для реализации ofreader = new fileReader (); ofreader.readasdataurl (file.files [0]); ofreader.onload = function (ofRevent) {pic.src = ofrevent.target.result;}; } else if (document.all) {// ie8- file.select (); var ReallocalPath = document.selection.createrAnge (). Text // Получить фактический локальный путь файла в IE if (window.ie6) pic.src = reallocalPath; // IE6 Browser устанавливает SRC IMG на локальный путь, чтобы напрямую отобразить изображение Else {// IE6 версия IE непосредственно установить IMG SRC не может отображать локальное изображение из -за проблем безопасности, но его можно реализовать с помощью фильтров. Браузер IE10 не поддерживает фильтры и необходимо использовать FileReader для его реализации. Поэтому, пожалуйста, будьте осторожны, чтобы судить, что Filereader First pic.style.filter = "Прогид: dximageTransform.microsoft.alphaimageLoader (sizingmethod = 'Image', src =/" " + ReallocalPath +"/")"; pic.src = 'Data: Image/Gif; Base64, R0lgodlhaqaabaaaap /// waaaach5aaaaaaaaaaaaaaaaaaaaaaaiacraeaow =='; // установить src img на прозрачную картину, связанную с базой64, и не будет отображать редакцию xx} at.t. fiple, что еще. {// firefox6- if (file.files.item (0)) {url = file.files.item (0) .getasDataurl (); pic.src = url; }}} </script> </head> <body> <form name = "form1" enctype = "multiply/form-data"> <table> <tr> <td> эскиз 1: </td> <td> <input type = "file" name = "file1" id = "file1" onChange = inmeding ('pic1', 'file1') "> </tre> </td> </td> </td> </td> </td> </td> </td> </td><td><img src="images/px.gif" id="pic1" ></td></tr><tr><td> Sketch 2: </td><td ><input type="file" name="file2" id="file2" onchange="change('pic2','file2')"></td><tr><td>Sketch View 2: </td> <td> <img src = "Images/px.gif" id = "pic2"> </td> </tr> </table> </form> </body> </html>