实时显示从file输入框中打开的图片C:\fakepath路径问题

html代码:

<input id="file_upload" type="file" />
<div class="image_container">
    <img id="preview" style="height:130px;width:117px;border-width:0px;"/>
</div>

jquery代码:

$(function () {
    $("#file_upload").change(function () {
        var $file = $(this);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var $img = $("#preview");

        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;

        }
    });
});

转自黄者之风

时间: 2024-08-02 10:57:26

实时显示从file输入框中打开的图片C:\fakepath路径问题的相关文章

取得窗口句柄和标题,跨类调用并实时显示在编辑框中(VS2010)

接上篇日志. 在WM_LBUTTONUP消息响应函数中写入代码: POINT pnt; WCHAR  wc_TargtWndTittle[200]; ::GetCursorPos(&pnt);      HWND h_TargetWnd = ::WindowFromPoint(pnt) ; //取得鼠标指针处窗口句柄;      ::GetWindowText(h_TargetWnd,wc_TargtWndTittle,200); 将wc_TargtWndTittle显示在对话框程序的编辑框控件

解决Android studio 中的 Android Device Monitor 中 File Explorer 无法打开data目录的方法(转载 http://www.jianshu.com/p/d8a9a2918c61)

Android Device Monitor 文件管理的常见问题  (转自http://www.jianshu.com/p/d8a9a2918c61) 作者 knightaoko 关注 2017.03.21 11:41* 字数 2750 阅读 770评论 5喜欢 9 Android Device Monitor 是 Android Studio 中用于监测模拟器或真机运行状态的一款开发者工具.但开发者在使用它的过程中往往会遇到很多问题,尤其对于新手.本文分析了实际学习中遇到的问题,包括:1. F

.project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示

project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示 event log中报:IllegalArgumentException:Multiple entries with same key: Google Inc.:Google APIs:23=Google APIs (Google Inc.) (API 23) and Google Inc.:Google APIs:23=Google APIs (Google Inc.) (A

iOS让自己的App在其他应用中打开列表中显示

像百度网盘等应用,里面的文件打开时,都可以通过以下应用再打开文件.下面红色框框内的我的jpg就是我做的一个例子.因为例子没有提供Icon,所以显示的是默认icon. 下面就是这例子的主要步骤和代码. 例子是一个打开jpg图片程序. 1.在项目的**info.plist文件中添加: [html] view plaincopy <key>CFBundleDocumentTypes</key> <array> <dict> <key>CFBundleT

vue中使用axios post上传头像/图片并实时显示到页面

前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&qu

JS实时获取输入框中的值

实时获取input输入框中的值需要oninput和onpropertychange属性来实现.原因是onpropertychange属性为IE专属,而oninput属性支持大部分浏览器包括IE9及以上的版本. oninput与onpropertychange失效的情况: oninput事件:1. 在脚本中改变value时,不会触发:2.从浏览器的自动下拉提示中选取时,不会触发. 例如: var testinput = document.createElement('input'); if('on

备忘:如何在输入框中显示灰色提示字体;整个div透明化显示

如何在输入框中显示灰色提示字体? <input type="text" placeholder="邮箱/手机号/淘宝会员名"/> 整个div透明化显示? 1 background-color:gray;/*设置背景色*/ 2 3 border: 1px solid black;/*设置边框*/ 4 5 filter:alpha(opacity=60);/* for IE */ 6 7 opacity:0.9;/* CSS3 standard */

用按钮打开对话框选取图片按大小显示在控件中

[cpp] view plaincopy 打开按钮相应消息 [cpp] view plaincopy void CLoadBmpDlg::OnBtnOpenBmp() { // TODO: Add your control notification handler code here ////选取图片文件 [cpp] view plaincopy CFileDialog file_open_dlg(TRUE,NULL,NULL,OFN_HIDEREADONLY,"BMP Files(*.bmp)

在Windows7中打开照片,提示“Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足。....”

在Windows7中打开照片,提示“Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足.请关闭一些目前没有使用的程序或者释放部分硬盘空间(如果硬盘几乎已满),然后重试.” 如下图所示: 处理过程: 1.查看计算机的内存和磁盘空间是否足够.  总内存为4GB,只使用40%:每个分区的磁盘空间都有几十个G.(资源足够) 2.查看图片是否已损坏.  图片在别的电脑能打开,或者在本机使用“画图”功能也能打开. (未损坏) 经发现,使用Windows照片查看器打开电脑中存在的图片,不