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上傳圖片功能。
如圖：