file控件选择图片,img即可显示(无需上传)
代码如下:
<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即可显示(无需上传)的更多相关文章
- File控件选择图片的时候在Html5下马上预览
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...
- 浅谈简单实现file控件的图片预览,裁剪和上传。
1.图片预览之FileReader对象 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...
- file控件选择同一文件不触发change事件和img控件不改变src的情况下图片不刷新问题解决
最近跑来前端掺和了.. file控件的问题用 inputFile.value = ''; img控件的问题,在图片后面添加一串无意义的参数即可,例如: img.src = 'file:///' + 本 ...
- 5、利用控件TVCLZip和TIdFTP压缩文件并上传到FTP的线程单元pas 改进版
用到临界区 保护写日志的函数: 递归函数 删除目录下的所有文件: 循环创建或判断FTP的目录: 可改进的地方:循环压缩深层次目录的所以文件: 实现断点续传,或断点下载: {************** ...
- vue 选择图片(限定大小)上传到服务器
FormData: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects 成果: htm ...
- html file控件选择文件后立即预览 js实现
//上传图片后立即预览 file对象,图片容器id function showImg(fileObj,imgId) { var file=fileObj.files[0]; var r = new F ...
- File控件杂谈
我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...
- 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件
使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...
- Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,相似图片浏览器
MAC : XCode -> Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,类似图片浏览器 STEP1:将两个目录复制到project里面ImageBrowser ...
随机推荐
- 算法(Algorithms)第4版 练习 1.5.13
package com.qiusongde; import edu.princeton.cs.algs4.StdIn; import edu.princeton.cs.algs4.StdOut; pu ...
- STL头文件有哪些及简单介绍
#include <iostream>标准输入输出cin cout等 #include <algorithm> 算法库 如sort find等 #include <vec ...
- Win7.窗口自动滚动回到屏幕
PS:笔记本 ThinkPad E440 1.前提:窗口 的一部分位于在屏幕的外面,此窗口处于激活的状态 操作:鼠标放置在窗口内部,鼠标继续往屏幕外部移动,鼠标没有任何其他事件(只有 MouseMov ...
- artdialog插件--iframe穿透特性
使用artdialog可以实现嵌套页面间的通信. 一.引入插件 //artdialog是建立在jquery上面的所以要首先引入jquery <script src="__CLASSTP ...
- Django-01
知识预览 Django基本命令 二 路由配置系统(URLconf) 三 编写视图 四 Template 五 数据库与ORM admin的配置 一 什么是web框架? 框架,即framework,特指为 ...
- Eclipse_常用技巧_01_自动添加类注释和方法注释
一.步骤 路径A=windows-->preference-->Java-->Code Style-->Code Templates-->Comments 自动添加注释一 ...
- vc6++Release和Debug
1. 如何快速地规范代码缩进格式 选中所需要规范的代码,按shift+F8 2. 如何在Release状态下进行调试 Project->Setting=>ProjectSetting对话框 ...
- Android 内存监测工具 DDMS --> Heap
用 Heap监测应用进程使用内存情况的步骤如下: 1. 启动eclipse后,切换到DDMS透视图,并确认Devices视图.Heap视图都是打开的: 2. 将手机通过USB链接至电脑,链接时需要确认 ...
- 基于Ubuntu交叉编译FFmpeg Windows SDK
写在前面 FFmpeg是一个开源且跨平台的音视频解决方案,集采集.转码.流式化为一身,项目的libavcodec编解码模块和libavformat媒体格式模块,支持非常非常丰富的编解码格式和容器封装格 ...
- HDOJ1151有向图最小路径覆盖
//有向图最小路径覆盖:从某一点出发沿着有向路径,不走回路,能将所有的结点遍历. #include<iostream> #include<cstdio> #include< ...