Я использую этот источник: http://opoloo.github.io/jquery_upload_preview/ до сих пор я могу загрузить одно изображение с предварительным просмотром.

<style type="text/css">
.image-preview {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #000000;
  color: #ecf0f1;
}
input[type="file"] {
    line-height: 200px;
    font-size: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
}
  label {
    position: absolute;
    z-index: 5;
    opacity: 0.7;
    cursor: pointer;
    background-color: #bdc3c7;
    width: 200px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-transform: uppercase;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
  }

</style>

<script type="text/javascript">
$(document).ready(function() {

    $("image-preview").each(
        function(){
                $.uploadPreview({
                    input_field: $(this).find(".image-upload"),
                    preview_box: this,
                    label_field: $(this).find(".image-label")
                });
        }
    );
});
</script>
<!--| catatan penting: yang penting action="" & input type="file" name="image" |-->
<form action="upload.php" method="POST" enctype="multipart/form-data">
    <div class="image-preview">
        <label for="image-upload" class="image-label">+ GAMBAR</label>
        <input type="file" name="my_field[]" class="image-upload" />
    </div>
    <div class="image-preview">
        <label for="image-upload" class="image-label">+ GAMBAR</label>
        <input type="file" name="my_field[]" class="image-upload" />
    </div>
    <input type="submit"/>
</form>

Затем попробуйте добавить больше предварительного просмотра изображения класса div, я хочу добавить еще одну кнопку с предварительным просмотром изображения. Я не хочу многократную загрузку одной кнопкой.

$(document).ready(function() {$.uploadPreview => используйте идентификатор, конечно, когда вы меняете класс и добавляете больше div, при загрузке кнопки другая кнопка изменится. меня смущает логика. Кто-нибудь может помочь? возможно, используя массив, но я не знаю как ..

0
Steven Sugiarto Wijaya 7 Сен 2016 в 07:29

3 ответа

Лучший ответ

Поскольку кнопка загрузки зависит от состояния uploadPreview, вам нужно инициализировать каждый div отдельно, чтобы получить отдельные кнопки загрузки. Измените ваш html следующим образом, дайте каждому контейнеру класс сказать imgBox

<div class="imgBox">
 <label for="image-upload" class="image-label">Choose File</label>
 <input type="file" name="image" class="image-upload" />
</div>
.....
....
...
<div class="imgBox">
 <label for="image-upload" class="image-label">Choose File</label>
 <input type="file" name="image" class="image-upload" />
</div>

.. Теперь инициализируйте каждый, используя jquery each()

 $(".imgBox").each(
            function(){
                $.uploadPreview({
                input_field: $(this).find(".image-upload"),
                preview_box: this,
                label_field: $(this).find(".image-label")
            });
});
1
Viney 7 Сен 2016 в 05:35

Я создал простой файл загрузки изображений index.html для загрузки и просмотра изображений.

Нуждается в j-query. Нет необходимости в дополнительных плагинах. Если есть вопросы задавайте;)

// для предварительного просмотра изображения нужны только эти строки кода

var imageId=idOfClicked;
var output = document.getElementById(imageId);
output.src = URL.createObjectURL(event.target.files[0]);

Проверьте это здесь:

https://jsfiddle.net/chs3s0jk/6/

0
George A 7 Сен 2016 в 05:18

У меня есть один лучший вариант для загрузки файла, его легко использовать, и вы можете попробовать его.

window.onload = function(){   
    if(window.File && window.FileList && window.FileReader){
        $(document).on("change",'.file', function(event) {
            var files = event.target.files; //FileList object
            var output = document.getElementById("upload-preview");
            $("#upload-preview").html("");
            if(files.length>5){
                $(".file").after("<div class='alert alert-error'><span class='close'></span>Maximum 5 files can be uploaded.</div>");
                $(this).val("");
                return false;
            }
            else{
                $(".file").next(".alert").remove();
            }
            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];
                //Only pics 
                // if(!file.type.match('image'))
                if(file.type.match('image.*')){
                    if(this.files[0].size < 2097152){    
                  // continue;
                    var picReader = new FileReader();
                    picReader.addEventListener("load",function(event){
                        var picFile = event.target;
                        var div = document.createElement("div");
                        div.className = "upload-preview-thumb";
                        div.style.backgroundImage = 'url('+picFile.result+')';
                        output.insertBefore(div,null);            
                    });
                    //Read the image
                    $('#clear, #upload-preview').show();
                    picReader.readAsDataURL(file);
                    }else{
                        alert("Image Size is too big. Minimum size is 1MB.");
                        $(this).val("");
                    }
                }else{
                alert("You can only upload image file.");
                $(this).val("");
            }
            }
        });
        $(".file2").change(function(event){
            var err=0;
            var input = $(event.currentTarget);
            var ele = $(this);
            var file = input[0].files[0];
            var u = URL.createObjectURL(this.files[0]);

            var w = ele.attr("data-width");
            var h = ele.attr("data-height");
            var img = new Image;

            img.onload = function(){
                if(w){
                    if(img.width!=w || img.height!=h){
                        ele.parent().find(".alert").remove();
                        ele.parent().find(".upload-preview").before("<div class='alert alert-error'>Please upload a image with specified dimensions.</div>");
                        ele.val("");
                    }
                    else{
                        ele.parent().find(".alert").remove();
                    }
                }
            };

            img.src = u;

            var nh;
            if($(this).attr('data-preview')=='full')
                nh = (h/w*150)
            else
                nh=150

            var preview = ele.parent().find(".upload-preview");
            var reader = new FileReader();
            preview.show();
            reader.onload = function(e){
                image_base64 = e.target.result;
                preview.html("<div class='upload-preview-thumb' style='height:"+nh+"px;background-image:url("+image_base64+")'/><div>");
            };
            reader.readAsDataURL(file);
        });

    }
    else
    {
        console.log("Your browser does not support File API");
    }
}

Приведенный выше код сохраните в виде одного файла js, например file-upload.js, затем свяжите его с вашим файлом, где вы хотите просмотреть. то есть

<script src="js/file-upload.js" type="text/javascript"></script>

Используйте этот пример для типа ввода

<input type="file" class="file2" name="page-image" id="page-image"/>

Это работает с классом, имя которого «file2», тот класс, который вы задали для поля ввода, способного создавать предварительный просмотр.

Полная структура что-то вроде ниже.

HTML-код, который вы можете попробовать

<input type="file" class="file2" name="page-image[]" id="page-image"/>
<div class="clearfix"></div>
<div class="upload-preview" style="display: block;">
    <div class="upload-preview-thumb">
    // perview genereate here
    // you can display image also here if uploaded throw the php condition in edit image part
    </div>
</div>
<input type="file" class="file2" name="page-image[]" id="page-image"/>
<div class="clearfix"></div>
<div class="upload-preview" style="display: block;">
    <div class="upload-preview-thumb">
    // perview genereate here
    // you can display image also here if uploaded throw the php condition in edit image part
    </div>
</div>

CSS

.upload-preview {
  border: 1px dashed #ccc;
  display: block;
  float: left;
  margin-top: 10px;
  padding: 5px;
}
.upload-preview-thumb {
  background-position: 50% 25%;
  background-size: cover;
  float: left;
  margin: 5px;
  position: relative;
  width: 139px;
}

Надеюсь, что это работает и в будущем это будет полезно для вас.

Спасибо.

0
Yagnik Detroja 7 Сен 2016 в 05:25