браузер загрузки файлов в виде миниатюр

0

Я пытаюсь написать фрагмент кода, который позволит пользователю открыть браузер файлов и выбрать файлы для загрузки на сайт. есть ли способ убедиться, что браузер файлов всегда открывается в виде эскизов? В окнах вид такой же, как и последний вид, который использовался.

<form action="demo_form.asp">
  Select a file: <input type="file" name="img">
  <input type="submit">
</form>

Я вижу, что в Facebook он всегда открывается как миниатюры независимо от последнего вида, которое было использовано, так как это делается?

Теги:
browser
file-upload
web
facebook

1 ответ

0

Этот код использует функции HTML5 и может не работать со старыми браузерами.

HTML:

<input type="file" style="display:none" id="upload-image" multiple="multiple"></input>
 <div id="upload" class="drop-area">
   Upload File
 </div>
 <div id="thumbnail"></div>

CSS:

.drop-area{
width:100px;
height:25px;
border: 1px solid #999;
text-align: center;
padding:10px;
cursor:pointer;
}

#thumbnail img{
width:100px;
height:100px;
margin:5px;
}

canvas{
border:1px solid red;
}

JQuery:

jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
var files = this.files
showThumbnail(files)
},false)

fileDiv.addEventListener("click",function(e){
 $(fileInput).show().focus().click().hide();
 e.preventDefault();
 },false)

fileDiv.addEventListener("dragenter",function(e){
 e.stopPropagation();
 e.preventDefault();
 },false);

fileDiv.addEventListener("dragover",function(e){
e.stopPropagation();
e.preventDefault();
},false);

fileDiv.addEventListener("drop",function(e){
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;
var files = dt.files;

showThumbnail(files)
},false);

function showThumbnail(files){
 for(var i=0;i<files.length;i++){
  var file = files[i]
  var imageType = /image.*/
  if(!file.type.match(imageType)){
   console.log("Not an Image");
   continue;
 }

var image = document.createElement("img");
// image.classList.add("")
var thumbnail = document.getElementById("thumbnail");
image.file = file;
thumbnail.appendChild(image)

var reader = new FileReader()
reader.onload = (function(aImg){
  return function(e){
    aImg.src = e.target.result;
  };
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
image.onload= function(){
  ctx.drawImage(image,100,100)
}}}});
  • 0
    то, что делает ваш код, если я правильно понял, генерирует миниатюры после загрузки. то, что я ищу, это чтобы открыть выбор файла в виде миниатюр всегда, независимо от последнего вида, который был использован пользователем. как это сделано в FB.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню