上传图片

HTML:

                            <tr>
                                <td>诉讼信息查询照片</td>
                                <td>
                                    <div class="table-td">
                                        <input type="file" accept="image/*"/ multiple="multiple">
                                        <a><img  class = "verifyPic" src="http://file.88mmmoney.com/49536eb9-1aff-477a-8d43-e08910819608" id = "litigationInfoPic"/></a>
                                    </div> 
                                </td>                                                   
                            </tr>
                            
             <div id="imgPreview">上传图片</div>

JS:

      $("input").change(function () {
            if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#imgPreview");
            dvPreview.html("");
            var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
            console.log($(this)[0]);
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $()
                        var img = $("<img />");
                        img.attr("src", e.target.result);
                        dvPreview.append(img);
                    }
                    reader.readAsDataURL(file[0]);
                    
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    dvPreview.html("");
                    return false;
                }
                count++;
                console.log(count);
            });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
            
        });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容