Question

我有一个文件上传字段，可以接受多个图片。我需要在上传之前预览这些图像。我也可以设置上传最大图像数量的限制吗？

Answer 1

试试这个。 http://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/

HTML

<label for=”files”>Select multiple files: </label>
<input id=”files” type=”file” multiple/>
<output id=”result” />

的Javascript

window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById(“files”);
filesInput.addEventListener(“change”, function(event){
var files = event.target.files; //FileList object
var output = document.getElementById(“result”);
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match(‘image’))
continue;
var picReader = new FileReader();
picReader.addEventListener(“load”,function(event){
var picFile = event.target;
var div = document.createElement(“div”);
div.innerHTML = “<img class=’thumbnail’ src=’” + picFile.result + “‘” +
“title=’” + picFile.name + “‘/>”;
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log(“Your browser does not support File API”);
}
}

的CSS

body{
font-family: ‘Segoe UI’;
font-size: 12pt;
}

header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;

}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}

.thumbnail{

height: 100px;
margin: 10px;
}

http://jsfiddle.net/0GiS0/Yvgc2/

Answer 2

<div contenteditable="true" data-size="0">
  Start typing anywhere in this box 
</div>

使用此代码进行多个图像上传和文本框预览.....

Answer 3

HTML

 <input type="file" id="multiupload" name="uploadFiledd[]" multiple >
 <button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
 <div id="uploadsts"></div>

JAVSCRIPT

<script>
function uploadajax(ttl,cl){

var fileList = $('#multiupload').prop("files");
$('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

var form_data =  "";

form_data = new FormData();
form_data.append("upload_image", fileList[cl]);

var imgData = new FileReader();

imgData.addEventListener('load',function(event){
    var image = event.target;
$('#imgprv'+cl).attr('src',image.result);
});

imgData.readAsDataURL(fileList[cl]);

var request = $.ajax({
          url: "upload.php",
          cache: false,
          contentType: false,
          processData: false,
          async: true,
          data: form_data,
          type: 'POST', 
          xhr: function() {  
      var xhr = $.ajaxSettings.xhr();
      if(xhr.upload){ 
        xhr.upload.addEventListener('progress', function(event){
                        var percent = 0;
                        if (event.lengthComputable) {
                            percent = Math.ceil(event.loaded / event.total * 100);
                        }
                        $('#prog'+cl).text(percent+'%')

                    }, false);
       }
      return xhr;
     }    
      })
      .success(function(res,status) {

        if(status == 'success'){

            percent = 0;
            $('#prog'+cl).text('');            

                $('#prog'+cl).text('--Success: ');

            if(cl < ttl){
                uploadajax(ttl,cl+1);
            }else{
               alert('Done ');

            }     

            }

      })
      .fail(function(res) {
      alert(res.status+': '+res.statusText);
      });

}



$('#upcvr').click(function(){

var fileList = $('#multiupload').prop("files");
$('#uploadsts').html('');
var i
for ( i = 0; i < fileList.length; i++) {
$('#uploadsts').append('<p class="upload-page"><img  id="imgprv'+i+'" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100px">'+fileList[i].name+'<span class="loading-prep" id="prog'+i+'"></span></p>');
if(i == fileList.length-1){
    uploadajax(fileList.length-1,0);
}
}

});

</script>

PHP

upload.php
    move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);

Answer 4

最简单的解决方案。

HTML

<div class="measure-fld">
     <input type="file" class="fileupload" name="room_imag[]" accept="image/x-png,image/gif,image/jpeg" required=""> 
     <div class="dvPreview"></div>
 </div>

JavaScript

jQuery(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

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

    };

    jQuery(document).on('change','.fileupload',function() {
        imagesPreview(this, 'div.dvPreview');
    });
});

通过预览上传多个图像

4 个答案: