javascript预览图片——IT轮子系列(九)

再使用htm控件

<input type="file" name="file" />

上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上传到服务器。今天正好解决了这样一个问题,记录博文,以备后用。

html 代码

<div>
    <input type="file" id="filePreview" /><br />
    <img id="imgPhoto" style="width:50px;height:50px;" />
</div>

js 代码

        $("#filePreview").on("change", function () {
            var url = $(this).val();
            if (url.length == 0) {
                alert("请选择文件");
                return;
            }
            //判断文件扩展名(待todo)
            var file = document.getElementById("filePreview");
            var windowURL = window.URL || window.webkitURL;
            var src = windowURL.createObjectURL(file.files[0]);//第一个文件,若是多文件上传,需循环
            $("#imgPhoto").attr("src", src);//修改图片控件的src属性
        });

效果

时间: 2024-10-04 22:12:37

javascript预览图片——IT轮子系列(九)的相关文章

JavaScript - 表单提交前预览图片属性

即Preview image and its properties before upload 其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. (ps:感谢爆栈^^) 首先做一些准备工作,HTML方面主要是img和input标签的id:     <form>         <input type='file' id="imgFile"  />

C#.net4建设网页上传图片前客户端预览图片不能显示

搞了好半天,完全照教学资料设的javascrip脚本,但就是显示不了,后来才发觉,原来客户端要把该网站设为信任才能显示. 所以记录一下,以后备查. <script type="text/javascript">        function showphoto() {            alert(document.getElementById("FileUpload1").value);            //把所选图片的全路径+文件名以“f

Html5选择图片并及时预览图片

以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="author" content="EdieLei" /> <titl

plupload上传前预览图片

plupload预览图片有多种方法,主要由moxie的Image提供,Image的downsize.crop.embed都可用来预览图片 1.downsize 最开始做项目的时候,我用的就是downsize来做预览图片 downsize(opts) Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions. Argume

模拟type=file;上传并预览图片

最近项目的会员中心,要做一个上传本地img并预览的效果.效果大概是这个样子.自己以前没做过:摸着石头过河总算完成了感觉有必要整理一下,写篇博客耍耍. 整体效果大概是这个样子的: 1.点击框框任何地方:弹出选择文件窗口: 2.选择后,再框框区域预览: 3.再次点击框框,更换图片. 下面说说整个实现的过程吧. html代码的结构大概是这样的.    <div class="imgitem secondImg">        <div class="u-add-

调用微信Js-SDK上传、预览图片

$(document).ready(function(){ var url = location.href.split('#')[0]; $.get(rootPath + "/wechat/member/user/getWechatConfig?url=" + url,"",function(data){ wx.config({ debug: false, appId: data.appId, nonceStr: data.nonceStr, signature:

微信小程序预览图片

选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml <!--监听按钮--> <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button> <!--通过数据绑定的方式动态获取js数据-->

Windows server 2008 R2如何预览图片而不是显示图标?

? Previews of media files are disabled by default in Windows Server 2008. In this article we will enable it so we get the small previews back again! 1. Open the?Start?menu and click?Run. Now enter?SystemPropertiesPerformance?and click?OK. In the?Perf

js 本地预览图片和得到图片实际大小

//填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file.name.lastIndexOf('.')); if (file) { if (file.type.indexOf('image') == 0) { var reader = new FileReader(); reader.onload = function (e) { var image1 =