前端上传照片实现可预览功能
在写项目的时候，遇到了上传照片的功能，根据项目的需要，有很多种写法，有些需要上传之前对图片进行裁剪，有些直接上传到页面预览即可，再次之前，用过插件写了两次。用到的都是不同的插件，今天用jquery直接写了一个简单的功能。
bootstrap+fileinput插件实现可预览上传照片功能
https://cloud.tencent.com/developer/article/1141317
基于cropper.js的图片上传和裁剪
https://cloud.tencent.com/developer/article/1140209
<!DOCTYPE HTML>
<html>
<head>
<title>新增地图配置</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
#img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<form id="dialogForm">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-3 control-label">图标</label>
<div class="col-md-6 col-sm-6 col-xs-6">
<img src="" id="img" class="hide">
<input type="file" name="file" id="file" multiple="multiple" />
</div>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$("#file").change(function() {
var objUrl = getObjectURL(this.files[0]);
if(objUrl) {
$("#img").attr("src", objUrl);
$("#img").removeClass("hide");
}
});
//建立一个可存取到file的url
function getObjectURL(file) {
var url = null;
url = window.webkitURL.createObjectURL(file);
return url;
}
</script>
</body>
</html>关于浏览器兼容问题，上面写道的是在谷歌浏览器可用，要在火狐ie浏览器里面同样适用只需要在代码里面加上一段适配的代码，判断使用哪个浏览器打开即可。
//建立一个可存取到file的url
function getObjectURL(file)
{
var url = null ;
url = window.webkitURL.createObjectURL(file) ;
if (window.createObjectURL!=undefined)
{ // basic
url = window.createObjectURL(file) ;
}
else if (window.URL!=undefined)
{
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
}
else if (window.webkitURL!=undefined) {
// webkit or chrome
}
return url ;
}原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.06.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读