Question

这是个人资料图片问题。当我第一次设置图像时，它工作正常，而当我尝试第二次选择图像时，我没有选择它，而是在所有过程之后都将其取消，它在最终结果/输出中不显示图像

<!--HTML-->

   <div class="modal-body">
                <div class="row" style="padding-top: 4em; min-width: 1000px; max-width: 1200px;">
                    <div class="col s4" style="height:100%">
                        <div class="row row-zero grey lighten-3" style="margin-top: 50px; padding:10px; width: 300px; ">
                            <div class="row row-zero" style="border: 1px solid rgba(50,50,50,0.5); padding:10px;">                  
                                <label for="create-group-pic">
                                    <span id="group-image-holder" >
                                        <img id="group-image-uploader" class="image-circle" alt="" src="https://s3.ap-south-1.amazonaws.com/airitdata/default/ic_default_group_pic.png" style="padding:25px 5px; width:100%; height:300px;">
                                    </span>
                                </label>
                                <input id="create-group-pic" name="profile_pic" type="file" accept="image/*,capture=camera" style="width:1px; height:1px; display:none;">
                                <span class="col s12 grey lighten-2" style="text-align: center; padding:10px;">Group Profile Picture</span>
                            </div>
                        </div>
                    </div>

var img1;

$("#create-group-pic").on('change', function() {        if($(this)[0].files.length!=null){    img1=this.value;      // console.log(img1)        if (typeof (FileReader) != "undefined") {
                        var image_holder = $("#group-image-holder");            image_holder.empty();
                var reader = new FileReader();
                        reader.onload = function(e) {
                $("<img />", {
                    "src" : e.target.result,
                    "class" : "image-circle",
                    "id" : "group-image-uploader",
                    "style" : "width: 99%; height: 300px; overflow:hidden;"
                }).appendTo(image_holder);          }
                    image_holder.show();            reader.readAsDataURL($(this)[0].files[0]);      }       else {

                        alert("Your browser doesn't support file upload. Please update your browser. FileReader not supported..");      }   }   else{

                var img= $('#group-image-uploader img').attr('src',img1);
                console.log(img);
            } });

Answer 1

只有在reader.readAsDataURL($(this)[0].files[0]);时，您才必须执行$(this)[0].files != null

如何使用jQuery设置文件输入源

1 个答案: