如何使用javascript在html中上传图片时显示多个缩略图？

function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
    var reader = new FileReader(); 
 

 
    reader.onload = function(e) { 
 
     $('#documentUpload') 
 
     .attr('src', e.target.result) 
 

 
    }; 
 

 
    reader.readAsDataURL(input.files[0]); 
 
    } 
 
}

<html> 
 

 
<head></head> 
 

 
<body> 
 
    <ul> 
 
    <li> 
 
     <input type='file' onchange="readURL(this);" /> 
 
     <img id="documentUpload" src="#" alt="first image" /> 
 
    </li> 
 

 
    <li> 
 
     <input type='file' onchange="readURL(this);" /> 
 
     <img id="documentUpload" src="#" alt="second image" /> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html> 
 

 
> Blockquote

“在例如，单击任意选择图像按钮，但图像会显示在只有第一种情况下，我在这两种情况下，并在JavaScript中改变了ID，以及，但它没有工作。代码以上是如何在html中显示图像的解决方案“

来源

2016-10-02 VipC

问题是ID需要唯一。在这个例子中，我添加了一个名为document-up的属性，它起作用。在这种情况下，可以使用属性或类来选择多个元素。

function readURL(input,option) { 
 
    if (input.files && input.files[0]) { 
 
    var reader = new FileReader(); 
 

 
    reader.onload = function(e) { 
 
     if (option == 1){ 
 
     $("#documentUpload1") 
 
     .attr('src', e.target.result) 
 
     } else { 
 
     $("#documentUpload2") 
 
     .attr('src', e.target.result) 
 
     } 
 
    }; 
 

 
    reader.readAsDataURL(input.files[0]); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 

 
<head></head> 
 

 
<body> 
 
    <ul> 
 
    <li> 
 
     <input id="input1" type='file' onchange="readURL(this,1);" /> 
 
     <img id="documentUpload1" document-up src="#" alt="first image" /> 
 
    </li> 
 

 
    <li> 
 
     <input id="input2" type='file' onchange="readURL(this,2);" /> 
 
     <img id="documentUpload2" document-up src="#" alt="second image" /> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

来源

2016-10-02 21:40:38

它的工作，但相同的图像越来越uploaded.I希望不同的图像 – VipC

@ user31502，我编辑的代码，你的情况，传递一个选项，以找到图像的目标。 –

谢谢，对不起延迟回复 – VipC

这里有一个方法，将用于图像的任意数量和每个文件选择器图像任意数量的工作。

您只需将#previewHolder div封装为表单并处理其提交。

function newEl(tag){return document.createElement(tag)} 
 
function byId(id){return document.getElementById(id)} 
 
function allByTag(tag,parent){return (parent == undefined ? document : parent).getElementsByTagName(tag)} 
 

 

 
// useful for HtmlCollection, NodeList, String types 
 
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need 
 

 
// callback gets data via the .target.result field of the param passed to it. 
 
function loadFileObject(fileObj, loadedCallback){var a = new FileReader();a.onload = loadedCallback;a.readAsDataURL(fileObj);} 
 

 

 
window.addEventListener('load', onDocLoaded, false); 
 

 
function onDocLoaded(evt) 
 
{ 
 
\t byId('addBtn').addEventListener('click', onAddBtnClicked, false); 
 
} 
 

 

 
/* html below function needs to create - we dont bother with the img here, since we create as needed when file/s picked */ 
 
/* 
 
\t \t <div class='item'> 
 
\t \t \t <img height='100px' width='100px'/><br> 
 
\t \t \t <input type='file'/> 
 
\t \t </div> 
 
*/ 
 
function onAddBtnClicked(evt) 
 
{ 
 
\t var wrapper = newEl('div'); 
 
\t wrapper.className = 'item'; 
 
// \t var img = newEl('img'); 
 
// \t img.style.height = '100px'; 
 
// \t wrapper.appendChild(img); 
 

 
\t var input = newEl('input') 
 
\t input.type = 'file'; 
 
\t 
 
\t // input.multiple = 'true'; \t \t \t // file-inputs are single-selection only be default. 
 
\t 
 
\t input.addEventListener('change', onFileChanged, false); 
 
\t input.name = 'inputFiles[]'; \t \t \t // all inputs to get same name. Name to include [] so php can retrieve all files 
 
\t wrapper.appendChild(input); 
 
\t 
 
\t byId('previewHolder').appendChild(wrapper); 
 
} 
 

 
function onFileChanged(evt) 
 
{ 
 
\t var numFiles = this.files.length; 
 
\t var itemWrapper = this.parentNode; 
 
\t var fileInput = this; 
 
\t 
 
\t if (numFiles == 0) 
 
\t { 
 
\t \t // no files chosen, so remove this preview/file-picker element 
 
\t \t var previewHolder = itemWrapper.parentNode; 
 
\t \t previewHolder.removeChild(itemWrapper); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t // remove all/any existing images 
 
\t \t while (allByTag('img', itemWrapper).length != 0) 
 
\t \t \t itemWrapper.removeChild(allByTag('img', itemWrapper)[0]); 
 
\t \t \t 
 
\t \t forEach(this.files, loadAndPreviewImage); 
 
\t \t 
 
\t \t function loadAndPreviewImage(fileObj) 
 
\t \t { 
 
\t \t \t loadFileObject(fileObj, onFileObjLoaded); 
 
\t \t \t 
 
\t \t \t function onFileObjLoaded(evt) \t //.target.result; 
 
\t \t \t { 
 
\t \t \t \t var img = newEl('img'); 
 
\t \t \t \t img.style.height = '100px'; 
 
\t \t \t \t img.src = evt.target.result; 
 
\t \t \t \t itemWrapper.insertBefore(img, fileInput); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
}

.item 
 
{ 
 
\t border: solid 1px black; 
 
\t border-radius: 6px; 
 
\t padding: 4px; 
 
} 
 
.button:hover 
 
{ 
 
\t background-color: #b0ffb0; 
 
    cursor: pointer; 
 
}

\t <div id='previewHolder' style='width: 200px'> 
 
\t \t <div class='button' id='addBtn' style='text-align:center;padding: 4px'><svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32"> 
 
\t <g transform="translate(0 -1020)" stroke="#00c03b" fill="none"> 
 
\t \t <circle cx="16" cy="1036" r="14.5" stroke-width="2.998"/> 
 
\t \t <path d="m8 1036h16" stroke-linecap="round" stroke-width="3"/> 
 
\t \t <path d="m16 1044v-16" stroke-linecap="round" stroke-width="3"/> 
 
\t </g> 
 
</svg></div> 
 
\t </div>

来源

2016-10-03 06:52:35 enhzflep

如何使用javascript在html中上传图片时显示多个缩略图？

回答

相关问题