这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现上传照片预览的方法, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
图片预览的 javascript 本地操作
早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览
现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox
上图的 html
- <tr>
- <td>缩略图</td>
- <td>
- <a href="javascript::void(0)" class="fileBtn">
- 选择文件
- <input type="file" id="file_pic">
- </a>
- </td>
- </tr>
- <tr>
- <td></td>
- <td><img id="file_view" style="width:110px"></td>
- </tr>
- // 下面用于图片上传预览功能 objc : { file, pic, width }
- yqUI.setImagePreview = function(objc) {
- var docObj=document.getElementById(objc.file);
- var imgObjPreview=document.getElementById(objc.pic);
- if(docObj.files &&docObj.files[0]){
- imgObjPreview.style.display = 'block';
- imgObjPreview.style.width = objc.width;
- imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
- return true;
- } else {
- return false;
- };
- };
- // 使用该控件, opts 配置对象
- var opts = {
- file : 'file_pic',
- pic : 'file_view',
- width : '180px'
- }
- yqUI.setImagePreview(opts);
来源: http://www.phperz.com/article/17/0706/330935.html