JQ 图片上传 本地上传 网络URL上传

   

 

                 <div class="w3l_search">
                            <form >
                                 <input class="pic" id= "provSelect1" type="text" placeholder="上传网络图片URL" >
                                 <button class="btn btn-default"  id="detect">检测</button>
                            </form>
                        </div>

                       <div class="upload" id="upload">
                            <input type="file" id="upload" >
                           <a>本地上传</a>

                       </div>

 

<div id="drop_area" style="position: relative;text-align: center;">
                            
</div>

 

本地上传

    $(function() {
        $("#upload").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#drop_area'), imgBox);
            $(".table-box").css("display","block");
        });

        function uploadImg(element, tag) {
            var file = tag.files[0];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                console.log(this.result);
                imgSrc = this.result;
                var imgs = document.createElement("img");
                $(imgs).attr("src", imgSrc);
                element.append(imgs);
            };
        }
    })
    
//url 上传    
     $(function() {
         $("#detect").click(function () {
             var imgUrl = $("#provSelect1").val();
             $("#drop_area").append("<img style='width:50%'>");
             $("#drop_area").find("img").attr("src",imgUrl) ; //将图片路径存入src中，显示出图片
         return false;
        });
      });