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