html file控件选择文件后立即预览 js实现

//上传图片后立即预览 file对象,图片容器id
function showImg(fileObj,imgId) {

    var file=fileObj.files[0];
           var r = new FileReader();
                r.readAsDataURL(file);
                $(r).load(function() {
                    $(‘#‘+imgId).attr("src", this.result);
            })                    

}

<input type="file" onchange="showImg(this,‘img‘)"   accept="image/gif"  />

通过accept限制文件类型 通过file.size验证文件大小 file.szie是以字节为单位

时间: 2024-10-14 01:31:04

html file控件选择文件后立即预览 js实现的相关文章

File控件选择图片的时候在Html5下马上预览

页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;height:200px;" /> <form id="form_photo" method="post" action="/N/SavePhoto?id=1"> <input style=" display:no

file控件选择同一文件不触发change事件和img控件不改变src的情况下图片不刷新问题解决

最近跑来前端掺和了.. file控件的问题用 inputFile.value = ''; img控件的问题,在图片后面添加一串无意义的参数即可,例如: img.src = 'file:///' + 本地图片路径+ '?t=' + Math.random();

C++ windows图形界面,点击Button按钮通过openFileDialog控件选择文件

一直没用C++写过图形界面,之前用C#写很简单啊,没想到今天用C++还是有点不爽! 第一个问题,就是点击一个按钮button,选择文件,非文件夹,是文件,就是图片之类的东西! 首先,可以在界面中拖一个openFileDialog控件,控件名字就叫openFileDialog1,如图所示 也可以在Button的点击事件里new一个openFileDialog控件也可以! 然后,就是在button点击事件里,写下相应的代码就可以了: private: System::Void button1_Cli

使用Profile文件记录JFileChooser(或者File控件)最新打开的文件路径

一.描述 我们使用JFileChooser或者File控件打开Windows系统目录下的文件之后,如何保存我们最近打开的文件路径,使得每次打开文件就能打开最近一次打开的文件目录,而不是每次默认打开C:\Users\Administrator\Documents目录.我们需要使用Profile属性文件来记录最近打开的文件路径,在File控件打开文件前先读取配置文件中的最近文件目录,在打开文件后将路径保存到Profile文件中,在操作完毕点击确定按钮后写入Profile配置文件. 二.源代码 imp

File控件杂谈

我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. 看上面的描述,file控件貌似挺强大的,事实上也是这样的.但实际开发中我们也可以挑出file控件的诸多问题: 1.我们可以通过value属性获取用户选择的文件的名称,但出于安全因素,该属性只读,所以也就无法指定默认值. 2.最让我们诟病的是,file控件在不同浏览器上长相迥异.这让我们开发者情何以堪?而且“选

File杂谈——初识file控件

首先我说明下,这里介绍的file控件指的是网页中的FileUpload对象,也就是我们常见的<input type="file">.如果你不是想寻找这方面的东西,就可以绕道了. 功能 当我们需要在网页中实现文件上传功能的时候,file控件就可以大显身手了.HTML文档中每添加一个<input type="file">,实际就是创建了一个FileUpload实例对象.用户可以通过点击file控件选择本地文件,当我们提交包含该file控件的表单时

Js获取file上传控件的文件路径总结

总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = function(){ alert(getFullPath(this)) } function getFullPath(obj){ if(!obj){return;} if(!-[1,]){obj.select();return document.selection.createRange().text;} r

混合开发 webview 中file 控件 点击后无反应解决方法

最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后,找到以下解决方案 开头定义 private ValueCallback<Uri> mUploadMessage; final static int FILE_SELECTED = 4; 然后设置 mWebView.setWebChromeClient(new WebChromeClient() {

在EasyUI项目中使用FileBox控件实现文件上传处理

我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是Jquery+Flash实现文件的上传处理,HTML5收费版本的没有试过.随着Flash逐渐退出整个环境,很多浏览器都可能不再支持Flash的了,因此在更新原有EasyUI整个框架的时候,我们对框架全面进行了完善,包括替换了这个Uploadify的文件上传模块,使用EasyUI内置的FileBox控件,结合Jq