<!DOCTYPE html>
<html lang='zh'>
<meta charset="utf-8"/>
<head>
<style>
body{
background: rgba(0,0,0,0.9);
font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #fff;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 170px;
color: #ffffff;
}
form input{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form button{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form button:hover{
background: #149174;
color: #0C5645;
}
form button:active{
border:0;
}
#imgv{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: auto;
color: #fff
}
#imgv img{
width: 100%;
height:auto;
}
#purl{
text-align: center;
color:#fff;
}
</style>
</head>
<body>
<form id="uploadForm" action="https://s.taobao.com/image" method="post">
<input type="file" name="imgfile">
<p>拖放或选择图片, 开始上传你的图片。 </p>
<button type="submit">上传</button>
</form>
<div id="imgv"></div>
<div id="purl"></div>
<script src='//img.huaweicloud.com/static/js/v2/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
$('form input').change(function () {
$('form p').text(this.files.length + " 您已选中");
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "https://s.taobao.com/image",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
dataType: 'json',
processData:false,
success: function(data)
{
$('#uploadForm').hide()
var piclink='<img src="'+data.url+'" />';
$("#imgv").html(piclink);
$("#purl").html('<p>外链地址：http:'+data.url+'<p>');
},
error: function()
{
}
});
}));
});
});
</script>
</body></html>