代码如下:

        <script>
$(function() {
$("#Book_Fiel").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#Book_Picture"); if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
} else {
dataURL = $file.val();
var imgObj = document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; }
});
});
</script>

file控件选择图片,img即可显示(无需上传)的更多相关文章

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

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  2. 浅谈简单实现file控件的图片预览,裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

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

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

  4. 5、利用控件TVCLZip和TIdFTP压缩文件并上传到FTP的线程单元pas 改进版

    用到临界区 保护写日志的函数: 递归函数 删除目录下的所有文件: 循环创建或判断FTP的目录: 可改进的地方:循环压缩深层次目录的所以文件: 实现断点续传,或断点下载: {************** ...

  5. vue 选择图片(限定大小)上传到服务器

    FormData:  https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects  成果: htm ...

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

    //上传图片后立即预览 file对象,图片容器id function showImg(fileObj,imgId) { var file=fileObj.files[0]; var r = new F ...

  7. File控件杂谈

    我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...

  8. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  9. Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,相似图片浏览器

    MAC : XCode -> Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,类似图片浏览器 STEP1:将两个目录复制到project里面ImageBrowser ...

随机推荐

  1. JFreeChart插件

    JFreeChart的核心对象. 1. 制图对象 JFreeChart的类是制图对象.常用方法: 方法 说明 Void setAntiAlias(Boolean flag) 设置字体边界模糊 Void ...

  2. JQUERY获取html标签自定义属性值或data值

    //获取属性值 1 <div id="text" value="黑哒哒的盟友"><div> jQuery取值: $("#tex ...

  3. Android 布局文件

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  4. POJ1363 Rails 验证出栈序列问题

    题目地址: http://poj.org/problem?id=1363 此题只需验证是否为合法的出栈序列. 有两个思路: 1.每个已出栈之后的数且小于此数的数都必须按降序排列.复杂度O(n^2),适 ...

  5. How to reduce Index size on disk?减少ES索引大小的一些小手段

    ES索引文件瘦身总结如下: 原始数据:(1)学习splunk,原始data存big string(2)原始文件还可以再度压缩倒排索引:(1)去掉不必要的倒排索引信息:例如文件位置倒排._source和 ...

  6. vue-mixins使用注意事项和高级用法

    因为在项目中 mixins(混合)特性使用频率是很高的 有必要熟练掌握官方文档: mixins 实际项目中 一般都存在 列表(list) 这种很常见的使用场景 话再多都不如上demo file: mi ...

  7. Firefox 不知道如何打开此地址,因为协议 (javascrpit) 未和任何程序关联.

    用火狐打开出现这个错误,360没事:这个是什么原因???怎么解决?代码:<a href="javascrpit:;"onclick="showD('pas','ri ...

  8. 我对java的理解(二)——反射是小偷的万能钥匙

    在我们生活中,车上或者路上有时候会遇到一种很讨厌的人——“小偷”,趁我们不注意或者疏忽的时候拿走属于我们的东西.更有甚者,趁我们不在家的时候,手持一把万能钥匙,打开我们的房门,悠闲的查看房间的布置,翻 ...

  9. [: xxxx: Unexpected operator

    /*************************************************************************** * [: xxxx: Unexpected o ...

  10. ffmpeg avpicture_fill的一些使用

    标签: ffmpegavpicture_fill 2013-05-17 10:03 4713人阅读 评论(1) 收藏 举报  分类: ffmpeg(3)  这个FFMPEG我没找到详细的中文教程,只有 ...