<html>
<head></head>
<body>
<form action="upload" method="post" enctype="multipart/form-data" >
<div class="am-form-group am-form-file">
<label for="doc-ipt-pwd-2" class="am-u-sm-2 am-text-sm am-text-right">缩略图地址</label>
<div class="am-u-sm-6 ">
<input type="text" id="ImgURL" name="ImgURL" placeholder="缩略图地址" class="am-input-sm" >
<div class="spe-alert"></div>
</div>
<div class="am-u-sm-2 am-u-end">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 浏览</button>
<input id="doc-form-file" type="file" name="photo" οnchange='PreviewImage(this)' multiple>
</div>
<div class="am-u-sm-1 am-text-danger am-vertical-align-middle">*</div>
</div>
<div class="am-form-group">
<div id="imgPreview" class="am-u-sm-4 am-u-sm-centered am-u-end">
<img id="img1" src="" alt="" width="200" height="200"/><!-- 显示缩略图 -->
</div>
</div>
</from>
<script type="text/javascript">
//===【浏览文件上传地址写入文本框】开始
$(function() {
$('#doc-form-file').on('change', function() {
var fileNames = '';
$.each(this.files, function() {
fileNames += this.name ;
});
$('#ImgURL').val(fileNames);
});
});
//===【浏览文件上传地址写入文本框】结束
//缩略图显示方法
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}
else//FF
{
path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
//path = imgFile.files[0].getAsDataURL();// FF 3.0
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='200px' height='200px' src='"+path+"'/>";
//document.getElementById("img1").src = path;
}
}
}
</script>
</body>
</html><html>
<head></head>
<body>
<form action="uploa
阅读背景：
ThinkPHP 上传图片，并显示缩略图_hdxyzlh_0225的专栏
来源：互联网
分享到：
