通过js操作上传图片,直接在页面显示
1.按照常规的逻辑:
我们通过ajax,或者form表单将文件提交到后台,将文件存储在某个临时的目录下,然后拿到这个存储路径,在前台页面赋值个<img>的src。
今天我们不走后台逻辑,即点击上传后,即可就在页面进行显示,ok,let's go!
2.代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
//var file =document.getElementById("myfile");
var file=$("#myfile").get(0);
var imgUrl =window.URL.createObjectURL(file.files[0]);
$("#pic_show").html("<img src="+imgUrl+" style=height:200px;width:200px;>");
});
});
</script>
</head>
<body>
上传图片:<input type="file" id="myfile" name="myimgfile"> <input type="button" id="btn" value="提交">
显示上传的图片:<div style="width:300px;height:200px;" id="pic_show">
<img src=""/>
</div>
</body>
</html>
3.效果图如下:
说明:
1.alert($("#myfile"))得到的是[object Object]
2、alert(document.getElementById("myfile"))得到的是[object HTMLDivElement]
3、alert($("#myfile")[0])或者alert($("#myfile").get(0))得到的是[object HTMLDivElement]
document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象
参考:https://blog.csdn.net/qq_27367825/article/details/78390146
都看到这里了,就顺手点击右上角的小手,给个评论,再走呗!☺
相关文章
- js上传图片
- mongo 报connect@src/mongo/shell/mongo.js:251:13错误的解决方式
- Promise学习笔记(三):源码core.js解析(上)
- BootStrap fileinput.js文件上传组件实例代码
- Bootstrap fileinput.js,最好用的文件上传组件
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- 微信JS-SDK选择相册或拍照并上传PHP实现
- js正则验证"汉字"
- 前端图片压缩上传(纯js的质量压缩,非长宽压缩)
- 《JS原理、方法与实践》- ES6新增对象(上篇)
- div随页面滚动遇顶固定的两种方法(js&jQuery)
- 已解决js中onchange事件无刷新上传同名文件只能上传一次的问题
- js:手写一个promise
- Node.js+Web TWAIN,实现Web文档扫描和图像上传
- Backbone.js 使用模板
- 上传图片,多图上传,预览功能,js原生无依赖
- Dropzone.js实现文件拖拽上传
- js常用函数和常用技巧
- js 上传图片