解决Extjs上传图片无法预览的解决方法

代码如下:

{
width: 450,
fileUpload: true,
fieldLabel: '选择图片',
items: [{
xtype: 'textfield',
id: 'up_forth',
name: 'up_forth',
inputType: 'file',
width: 300
}]
}

预览box


代码如下:

{
columnWidth: .18,
bodyStyle: ' margin:4px 10px 10px 5px',
layout: 'form',
items: [{
xtype: 'box',
autoEl: {
width: 150, height: 150,
tag: 'div',
id: 'browser_up_forth'
}
}]
}

myfrom表示上传控件外围的FormPanel,, contril_id表示上传控件的ID，只要在程序上预览注册该方法就可以，preview (myfrom,'up_forth' );


代码如下:

var preview = function (myform, control_id) {
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
myform.on('render', function (f) {
myform.form.findField(control_id).on('render', function () {
Ext.get(control_id).on('change', function (field, newValue, oldValue) {
var obj = Ext.get(control_id).dom;
var url = getFullPath(obj);
if (img_reg.test(url)) {
var newPreview = Ext.get('browser_' + control_id).dom;
var showPic = Ext.get("showPic_" + control_id);
if (showPic != null) {
showPic.remove();//删除原来的图片
}
var imgDiv = document.createElement("div");
imgDiv.id = "showPic_" + control_id;
document.body.appendChild(imgDiv);
imgDiv.style.width = "150px";
imgDiv.style.height = "150px";
imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
newPreview.appendChild(imgDiv);
}
}, this);
}, this);
}, this);
}

//得到图片地址
function getFullPath(obj) {
if (obj) {
// ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
// firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}

赞 (0)

相关推荐

  • 解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题

    用ExtJS开发将近一年了,也遇到了很多奇怪的问题,印象最深的要算是ExtJS在ie中显示的问题了.由于开发过程中大多用chrome来调试,很少在ie中调试(现在两者都要兼顾),导致最后在ie中页面不能正常加载,当时那个囧啊,看到ie报的错,我都想哭,连出错的堆栈信息都没有(这一点,ie做的真不好),无从下手啊.尝试过N多方法,最后发现导致出现这种问题的原因(90%以上的可能性)是js的数组中多了一个英文的逗号',',而这种在chrome和火狐中是没有问题的,如下面的代码所示: 复制代码 代码如

  • Extjs中ComboBox加载并赋初值的实现方法

    如: 复制代码 代码如下: editCityStore.load({ params: { provinceID: proid }); Ext.getCmp('city-id-name').setValue(cityid); 由于是store是异步加载的,所以他会先赋值再填充值到ComboBox,,这里就需要用: 当加载完成后再进行赋值 : 复制代码 代码如下: editCityStore.load({ params: { provinceID: proid }, callback: functi

  • Extjs显示从数据库取出时间转换JSON后的出现问题

    后台从数据库取出时间,JSON格式化后再传到gridpanel,这时时间变成了:/Date(32331121223)/这样的格式,那么这时需要以下处理才可以正常显示: 在 复制代码 代码如下: var record = Ext.data.Record.create([ { name: 'PublicDate', mapping: 'PublicDate', dateFormat: 'Y-m-d', convert: function (v) { if (v == null) { return n

  • ExtJs使用总结(非常详细)

    一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存. 注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它. 3.Ext.

  • extjs 04_grid 单击事件新发现

    EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据) Js代码 复制代码 代码如下: grid.addListener('cellclick',cellclick); function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); //Get the Record var fieldName = grid.getColumnModel().get

  • 解决Extjs上传图片无法预览的解决方法

    复制代码 代码如下: { width: 450, fileUpload: true, fieldLabel: '选择图片', items: [{ xtype: 'textfield', id: 'up_forth', name: 'up_forth', inputType: 'file', width: 300 }] } 预览box 复制代码 代码如下: { columnWidth: .18, bodyStyle: ' margin:4px 10px 10px 5px', layout: 'fo

  • vue.js图片转Base64上传图片并预览的实现方法

    对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现. 针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直

  • 微信小程序 解决请求服务器手机预览请求不到数据的方法

    微信小程序 解决请求服务器手机预览请求不到数据的方法

    微信小程序 解决请求服务器手机预览请求不到数据的方法 微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat配置好了https.然后用开发者工具测试是否能请求到数据,发现能获取到很开心. 后来是注册了小程序,在小程序后台也进行了设置,见下图 给项目加了APPID,准备进行手机预览的测试 这里说一下,在开发小程序时尽量把图片放到自己的服务器上,因为小程序在上传和预览时都有编译包的限制,没有算过,大概是1M,

  • jQuery实现上传图片前预览效果功能

    jQuery实现上传图片前预览效果功能

    网上很多代码实现了上传图片这个功能,但不支持实时预览图片,下面实现了上传图片前预览效果功能,具体如下 效果如图: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery上传图片之前可以预览效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jq

  • JS上传图片前实现图片预览效果的方法

    本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • JS实现上传图片实时预览功能

    前段时间在网络上找的代码,修改了一部分用在了项目里.原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除. //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_' + fileObj.na

  • Ajax 上传图片并预览的简单实现

    1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图片上传 | cookie</title> </head> <body> file: <

  • python 实现上传图片并预览的3种方法(推荐)

    python 实现上传图片并预览的3种方法(推荐)

    在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 test.html <!DOCTYPE html>

  • 简单实现jQuery上传图片显示预览功能

    本文实例为大家分享了jQuery上传图片显示预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img

  • js上传图片及预览功能实例分析

    本文实例讲述了js上传图片及预览功能.分享给大家供大家参考.具体分析如下: 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".

随机推荐