Mehrere Bilder hochladen mit Vorschau

Habe ich ein Datei-upload Feld, das nimmt mehrere Bilder. Ich brauche, um eine Vorschau dieser Bilder vor dem hochladen. Auch kann ich das eingestellte limit für die maximale Anzahl der Bilder, die hochgeladen werden?

InformationsquelleAutor Sawal Maskey | 2013-06-10

html jquery

Versuchen, diese ein.
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/

InformationsquelleAutor Marcelo Austria

window.onload = function () {
    var fileUpload = document.getElementById("fileupload");
    fileUpload.onchange = function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = document.getElementById("dvPreview");
            dvPreview.innerHTML = "";
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            for (var i = 0; i < fileUpload.files.length; i++) {
                var file = fileUpload.files[i];
                if (regex.test(file.name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = document.createElement("IMG");
                        var textbox = document.createElement('input');
                        textbox.type = 'text';
                        textbox.name = 'tag_line[]';
                        textbox.placeholder = 'Enter image tag line';
                        img.height = "100";
                        img.width = "100";
                        img.src = e.target.result;
                        dvPreview.appendChild(img);
                        dvPreview.appendChild(textbox);
                    }
                    reader.readAsDataURL(file);
                } else {
                    alert(file.name + " is not a valid image file.");
                    dvPreview.innerHTML = "";
                    return false;
                }
            }
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    }
};



<div class="row">
<div class="form-group col-sm-6">
<input id="fileupload" type="file" multiple="multiple" />
<hr />
<b>Preview</b><br />
</div>
</div>
<div id="dvPreview">
</div>

verwenden Sie diesen code für mehrere Bild-upload und Vorschau mit textbox.....

InformationsquelleAutor Amit Shee

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"]);

Sie können Bild hochladen / Datei mit jquery, ajax und php wie google hochladen. die Datei für den upload eines nach dem anderen. Nicht alle in einer Anfrage...

InformationsquelleAutor Milan Krushna

Einfachsten Lösungen immer.

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');
    });
});

InformationsquelleAutor Mayank Dudakiya

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.