extjs上传图片并预览
1. extjs怎样自定义图片，并把它变成iconcls类
iconCls类?? 比如一个按钮的图标??
这个你参考一下就可以了...
比如在css里定义一个
.ico_add {background-image:url(../ico/add.png)}
然后再Js中
{xtype:"button" , text:"添加" , iconCls:"ico_add}
就可以显示上面的图标了...当然图标尺寸一般16X16就可以
2. extjs图片下载怎么做
呃，这里说2种方法，具体采纳哪种看你自己的需求
web上的图片保存实际有2种方法
你说你的图片已经以列表形式展现出来了，那么实际上右键->图片另存为就可以满足要求了
但是你说你已经做了个下载按钮，那么比较正规的做法应该这样
给这个按钮加一个handler，将图片的主键（路径，或者能在数据库查出的id）传到后台的一个处理页，由处理页以流的形式输出出来，likethis
{
text:'下载',
handler:function(){
location.href='xxx.php?id=xxx'
}
}由于不知道你的后台用的什么，此处以php为例
<?php
$id=$_GET['id'];
//数据库查询输出图片路径
$file_size=filesize($路径变量);
$fp=fopen($路径变量,'r');
header('Content-Type:application/octet-stream');
header('Accept-Ranges:bytes');
header('Accept-Length:'.$file_size);
header('Content-Disposition:attachment;filename='.$图片名称变量);
echofread($fp,$file_size);
fclose($fp);
?>
至于说extjs能不能直接用js进行图片输出，从我个人经验来看是没有的（也许可能是我见识浅薄，如有此类方法，请教教我~）
虽然extjs的chart的确是有一个把图片保存为图片的功能，但是那是js绘出的位图，图片是直接从内存输出的，直接图片输出的js我确实没有接触过
希望帮到你，欢迎追问
3. php上传图片到服务器的前端和php代码
<?
require_once('../classfile/guid.class.php');
if(!isset($_FILES['imgFile'])){
echojson_encode(array("success"=>false,'msg'=>"NotgetImgfile"));
return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上传文件的文件名
$type=$upfile["type"];//上传文件的类型
$size=$upfile["size"];//上传文件的大小
$tmp_name=$upfile["tmp_name"];//上传文件的临时存放路径
$error_cod=$upfile["error"];
if($error_cod>0){
echojson_encode(array("success"=>false,'msg'=>$error_cod));
}
$ext_file_name="";
switch($type){
case'image/pjpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/jpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/gif':
$okType=true;
$ext_file_name =".gif";
break;
case'image/png':
$okType=true;
$ext_file_name =".png";
break;
}
if(!$okType){
echojson_encode(array("success"=>false,'msg'=>"Notimage"));
return;
}
$web_root="D:".DIRECTORY_SEPARATOR."Easy2PHP5".DIRECTORY_SEPARATOR."webSiteJfz".DIRECTORY_SEPARATOR;
$photo_tmp_path=$web_root."img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp";
$temp_file_name=creat_guid(0).$ext_file_name;
$photo_tmp_file_name=$photo_tmp_path.DIRECTORY_SEPARATOR.$temp_file_name;
$photo_tmp_file_scr="img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp".DIRECTORY_SEPARATOR.$temp_file_name;
move_uploaded_file($tmp_name,$photo_tmp_file_name);
echojson_encode(array("success"=>true,'msg'=>"ok","file_name"=>$photo_tmp_file_name,"file_scr"=>$photo_tmp_file_scr));
//echojson_encode(array("success"=>false,'msg'=>json_encode($_FILES['imgFile'])));
return;
?>
guid.class.php//生成唯一的图片文件名
<?
functioncreat_guid($long){
$uuid="";
if(function_exists('com_create_guid')){
$uuid=com_create_guid();
}else{
mt_srand((double)microtime()*10000);//optionalforphp4.2.0anp.
$charid=strtoupper(md5(uniqid(rand(),true)));
$hyphen=chr(45);//"-"
$uuid=chr(123)//"{"
.substr($charid,0,8).$hyphen
.substr($charid,8,4).$hyphen
.substr($charid,12,4).$hyphen
.substr($charid,16,4).$hyphen
.substr($charid,20,12)
.chr(125);//"}"
//return$uuid;
}
if(!isset($long)||$long==0){
returnsubstr($uuid,1,strlen($uuid)-2);
}else{
return$uuid;
}
}
4. htmleditor 如何上传图片
最近用Extjs做项目，用到htmleditor控件，唯一的缺陷是不可以上传图片，为了以后方便，在基于htmleditor控件上写了一个支持上传图片的。
控件StarHtmleditor
/**
* 重载EXTJS-HTML编辑器
*
* @class HTMLEditor
* @extends Ext.form.HtmlEditor
* @author wuliangbo
*/
HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '选择文件',
name : 'userfile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
height : 25,
anchor : '90%'
}],
buttons : [{
text : '上传',
type : 'submit',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传',
url : 'Default.aspx',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
win.hide();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告',
action.result.errors.msg);
}
});
}
}, {
text : '关闭',
type : 'submit',
handler : function() {
win.close(this);
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
页面js代码
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var ff = new Ext.FormPanel({
title : "文件上传",
renderTo : document.body,
width : 600,
height : 480,
labelWidth : 55,
frame : true,
items : [{
xtype : "textfield",
name : "title",
fieldLabel : "标题",
anchor : "98%"
}, {
xtype : "combo",
name : "topic_id",
fieldLabel : "所属栏目",
anchor : "98%"
}, {
xtype : "textfield",
name : "keywords",
fieldLabel : "关键字",
anchor : "98%"
}, {
xtype : "StarHtmleditor",
name : "content",
fieldLabel : "内容",
anchor : "98%"
}]
});
});
后台代码简单实现了一下
protected void Page_Load(object sender, EventArgs e)
{
string fileName = string.Empty;
string fileURL = string.Empty;
string rt = string.Empty;
try
{
HttpPostedFile file = Request.Files[0];
fileName = GetFileName(file.FileName);
file.SaveAs(Server.MapPath("upload//") + fileName);
fileURL = "upload/" + fileName;
rt = "{success:'true',fileURL:'" + fileURL + "'}";
}
catch
{
rt = "{success:'false',fileURL:'" + fileURL + "'}";
}
Response.Write(rt);
}
private string GetFileName(string FullName)
{
string fileName = string.Empty;
int last = FullName.LastIndexOf(@"/");
fileName = FullName.Substring(last + 1, FullName.Length - last - 1);
return fileName;
}
实现效果如下
http://blog.csdn.net/zhaozhen1984/article/details/5911839
原文链接请查看谢谢。
http://www.cnblogs.com/wuliangbo/archive/2009/03/08/1406460.html
详查链接。谢谢。
5. extjs怎么使图片上传时显示预览
这个我做过，不难，思路给你
1.是当文本框内容发生改变的时候就将图片上传到服务器（如果图片小，用户是感觉不到你已经做了上传操作的。）
2.当服务器接受到这个图片的时候，将其放入到一个临时文件夹中并返回给前台一个图片路径（图片流也可以）。
3.Ajax请求会有一个相应，在服务器端成功接受到上传的图片后，返回给Ajax一个Reponse，这个Reponse里包含一个图片路径。
4.ExtJS在前台获取success里的responseText之后（也就是图片路径）将默认图片的src指向从后台反馈回来的图片路径。
现在图片就会现实出来
流程是：
用户选择图片-->
触发文本框改变事件--->
在事件中通过AJAX将图片上传给服务器--->
服务器将图片名称修改为UUID以免重复，并将此图片的路径返回给前台--->
前台AJAX请求的回调函数中获取responseText，也就是图片路径--->
设置默认图片的src为responseText---->
用户重新选择的时候（例如用户不喜欢这张图）--->
在文本框改变事件中通过AJAX将图片上传（包括先前上传的图片名称）--->
后台根据参数先删除临时图片--->
重复以上的步骤直到用户确定
需要注意的问题：
1.当用户改变了图片之后，需要把上一次的临时图片文件删除掉，以免出现垃圾图片过多。
2.每次上传图片的时候要在后面跟上一个随机参数（因为如果请求路径和参数相同，浏览器不会再继续发送请求）。通常情况下使用new Date()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()
3.图片太大的话，效果不是很好。
4.当用户点击确定后，将临时文件里的图片放置到你的正式图片存放目录下即可。
5.图片上传到后台使用UUID改名字，否则可能有重复
6. extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能
首先要使用extjs自带的HTMLEditor，然后在原有的工具条上添加一个图片按钮，点击这个图片按钮要弹出窗口，这个窗口负责实现上传功能，实现上传后，要将上传的图片路径添加到HTMLEditor的光标处，并且要以<IMG></IMG>的方式，这样HTMLEditor才能解析出来。实现代码如下：
前台JSP页面
fieldLabel : '商品特性',
id : 'shopSp.spTxms',
name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'
这其中引用了StarHtmleditor，StarHtmleditor.js的代码如下，直接将代码复制下来，然后新建个JS，全复制进去就行了。
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '选择文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
anchor : '90%'
}],
buttons : [{
text : '上传',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法，但只能传一个图片
//更新后的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上传失败',action.result.errors.msg);
}
});
}
}, {
text : '关闭',
handler : function() {
win.close(this);
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 网上是没有var的，不用var不知道为什么总是报错，另外JS一定要与JSP的编码方式一致，要不然报莫名其妙的错误，而且错误都没有显示。
后台java代码
/****
* HTMLEditor增加上传图片功能：
* 1、上传图片后，需要将图片的位置及图片的名称返回给前台HTMLEditor
* 2、前台HTMLEditor根据返回的值将图片显示出来
* 3、进行统一保存
* @param 上传图片功能
* @return JSON结果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}
特别要注意的是路径问题，路径问题主要有2点需要注意：
1、前台页面引用StarHtmleditor.js的路径一定要正确；
2、Htmleditor上传的图片路径一定要改，因为上传之后图片路径变为http://localhost:8080/，在正常使用中图片不显示，要将该地址替换为服务器的IP地址；替换方法如下：
//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题，需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));
这样基本就完成了这个HTMLEditor上传图片功能。
如图：