码迷,mamicode.com
首页 > 其他好文 > 详细

直接查看换取的图片

时间:2018-08-03 19:48:30      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:date   预览   pos   地址   func   eth   main   utf-8   ace   

<!doctype html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
</head>
<body>

{include file="public/header"}
<div class="content">
<div class="main-wrap">

<form action="{:url(‘Index/insert‘)}" class="parsley-validate" enctype="multipart/form-data" method="post">
<div class="form-group-col-2">
<div class="form-label">封面图</div>
<div class="form-cont">
<input type="file" name="img1[]" placeholder="封面图" class="form-control form-boxed" required="" id="up-goods-btn"/>
<img id="img0" style="width: 150px">
</div>
</div>

<div class="form-group-col-2">
<div class="form-label"></div>
<div class="form-cont">
<input type="submit" class="btn btn-primary aaa" value="保存"/>
</div>
</div>

</div>
</div>

<!--form validation js -->
<script src="__STATIC__/js/common/jquery.js"></script>
<script src="__STATIC__/js/parsley.js"></script>
<script src="__STATIC__/js/zh_cn.js"></script>
<script src="__STATIC__/layui/layui.js"></script>

<!--头像预览及上传-->
<script>
$("#up-goods-btn").change(function(){
// getObjectURL是自定义的函数,见下面
// this.files[0]代表的是选择的文件资源的第一个,因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
// ,但是这里只读取第一个
var objUrl = getObjectURL(this.files[0]) ;
// 这句代码没什么作用,删掉也可以
// console.log("objUrl = "+objUrl) ;
if (objUrl) {
// 在这里修改图片的地址属性
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
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
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}

</script>

</body>
</html>

 

 

 

id要保持唯一性!!!

直接查看换取的图片

标签:date   预览   pos   地址   func   eth   main   utf-8   ace   

原文地址:https://www.cnblogs.com/mcll/p/9415779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!