js上傳圖片插件
1. 用js、jquery如何實現上傳圖片的預覽
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//獲得表單元素
HttpPostedFile oFile = context.Request.Files[0];
//設置上傳路徑
string strUploadPath = "temp/";
//獲取文件名稱
string fileName = context.Request.Files[0].FileName;
補充:JQuery是繼prototype之後又一個優秀的javascript庫。它是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML(標准通用標記語言下的一個應用)、events、實現動畫效果,並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html裡面插入一堆js來調用命令了,只需要定義id即可。
2. 有沒有js先實現截圖,截完圖後再上傳到伺服器的插件
js不能處理二進制數據,截圖也只是通過遮罩等方法實現的,真正的圖片並沒有被截,所以你這個功能js是實現不了的,可以用flash
3. js 前端上傳多張圖片
可以用webuploader插件,上傳成功後,服務端返回圖片地址,客戶端<img>顯示圖片
X關閉按鈕這個得自己用css樣式控制,點擊X後,服務端刪除圖片,然後前端移除該X掉的圖片
4. 圖片上傳兼容性好的js插件 哪位大神可以幫忙呢
上面的這幾個事件里只有touchstart是移動端的事件(觸摸屏的事件)
click是電腦pc端的滑鼠事件,觸發的條件是滑鼠左鍵按下並且彈起
mousedown也是pc端的滑鼠事件,觸發的條件是滑鼠左鍵按下
dragstart是pc端的滑鼠事件,觸發的條件是滑鼠左鍵按下並且拖動
touchstart是移動端的觸摸事件,觸發的條件是手指按在屏幕上並且移動(手指不能離開屏幕)
5. js/jquery上傳圖片的問題
你可以使用jquery的一個插件uploadify,官網下載http://www.uploadify.com/
使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html
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上傳圖片功能。
如圖:
7. 求js圖片放大,縮小的插件,就是上傳的圖片點一下放大,可以旋轉啥的
animate.js
你可以搜一下
8. 求一款jQuery或js多圖上傳插件
多圖上傳沒問題,但是想上傳後可以刪除,可以修改名稱。這個只能你自己來實現。之前專門寫了一個上傳插件希望能幫到你
http://blog.csdn.net/sq111433/article/details/16872403