В этой статье используется конкретный код для реализации функции предварительного просмотра изображения JavaScript для вашей ссылки. Конкретный контент заключается в следующем
Во -первых, я поделюсь с вами кодом о предварительном просмотре изображений JS, который совместим с Firefox и Google Chrome
/* Предварительный просмотр изображения CASE*/$ (function () {$ ("#file0"). Bind ("change", function () {clickUpload ();});}); function clickupload () {var imgobject = document.getElementById ('file0'); var getImagesrc = getFullPath (imgobject); // локальный путь var srcs = window.url.createObjecturl (imgobject.files [0]); var pos = getimagesrc.lastindexof ("."); var lastname = getImagesrc.substring (pos, getimagesrc.length) // суффикс изображения] if (srcs! = "") {$ ("#yulan2"). attr ("src", srcs); } else {alert ("Пожалуйста, выберите изображение"); }} function getFullPath (obj) {// Получить полный путь изображения if (obj) {if (window.navigator.useragent.indexof ("msie")> = 1) {obj.select (); return document.selection.createrange (). Text; } else if (window.navigator.useragent.indexof ("firefox")> = 1) {if (obj.files) {return window.url.createObjectUrl (obj.files [0]); } вернуть obj.value; } вернуть obj.value; }}Пример кода реализует своевременный предварительный просмотр загрузки изображения JS:
<html> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Разгрузка изображения локальный предварительный просмотр </title> <style type = "text/css">#preview {width: 260px; рост: 190px; {Filter: Progid: dximagetransform.microsoft.alphaimageLoader (sizingmethod = image);} </style> <script type = "text/javascript"> // Использует фильтры для загрузки и предварительного просмотра изображений. функция PreviewImage (file) {var maxWidth = 260; var maxheight = 180; var div = document.getElementbyId ('preview'); if (file.files && file.files [0]) {div.innerhtml = '<img id = imghead>'; var img = document.getElementbyId ('imghead'); img.onload = function () {var rect = clacimgzoomparam (maxwidth, maxheight, img.offsetwidth, img.offsetheight); img.width = rect.width; img.height = rect.height; // img.style.marginleft = rect.left+'px'; img.style.margintop = rect.top+'px'; } var reater = new FileReader (); reader.onload = function (evt) {img.src = evt.target.result;} reader.readasdataurl (file.files [0]); } else // Совместим с IE {var sfilter = 'Filter: Progid: dximageTransform.microsoft.alphaimageLoader (sizingmethod = scale, src = "'; file.select (); var src = document.selection.createrange (). Document.GetElementById ('imghead'); = ('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); style = 'width: "+rect.width+" px; height: "+rect.height+" px; margin-top: "+rect.top+" px; "+sfilter+src+"/"'> </div>"; Ширина: высота: высота}; Math.round (ширина / скорость); id = "imghead" width = 100 Height = 100 border = 0 src = '<%= request.getContextPath ()%>/images/default.jpg'> </div> <input type = "file" oNchange = "previewImage (this)"/> </body> </html>Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.