本文目录一览:
- 1、求救!Extjs fileuploadfield怎么上传到服务器 后台用.net写
- 2、extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能
- 3、extjs 如何在动态生成的EditorGridPanel的单元格里面添加一个上传文件的功能?
- 4、extjs ajax 可以上传文件吗
- 5、ExtJs中怎么上传文件
求救!Extjs fileuploadfield怎么上传到服务器 后台用.net写
var formFilePath = new Ext.ux.form.FileUploadField({ id: 'PrjFilePath', emptyText: '请选择要导入的文件!', fieldLabel: '文件路径', name: 'PrjFilePath', buttonText: '',
buttonCfg: { iconCls: 'page_white_put' }
});
HttpPostedFile postedFile = Request.Files["PrjFilePath"];
string ImportFile = postedFile.FileName;
string fileName = SaveFile(postedFile, Server, Request); //文件保存至服务器
System.IO.FileStream stream = System.IO.File.OpenRead(fileName);
//文件流操作你就根据你的业务来 自行搞定
//保存方法
String SaveFile(HttpPostedFile postedFile, HttpServerUtility server, HttpRequest request)
{
String fullName = "";
try
{
String fileName = Path.GetFileName(postedFile.FileName);
String fileExtension = Path.GetExtension(fileName);
String year = DateTime.Now.Year.ToString();
DateTime date = DateTime.Now;
//生成文件名
String saveName = date.ToString("yyyyMMddHHmmssfffffff");
String tmpName = saveName + fileExtension;
String path = server.MapPath(@"~/" + ExcelHelper.PATH_NAME);
fullName = path + @"\" + tmpName;
postedFile.SaveAs(fullName);
}
catch (Exception)
{
throw new Exception("保存上传文件出错!");
}
return fullName;
}
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上传的图片路径一定要改,因为上传之后图片路径变为,在正常使用中图片不显示,要将该地址替换为服务器的IP地址;替换方法如下:
//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题,需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));
这样基本就完成了这个HTMLEditor上传图片功能。
如图:
extjs 如何在动态生成的EditorGridPanel的单元格里面添加一个上传文件的功能?
容器(可以是form等等).GetItemText("列名")
获取到你附件列
然后SetItemText("列名",设置的值)
也可以用
控件类.SetItemValue(设置的值)
extjs ajax 可以上传文件吗
文件上传的Ajax,首先Ajax并不支持流的传输,只是在里面套了个iframe。
//ajax 上传
Ext.get('btn').on('click',function(){
Ext.Ajax.request({
url:'Upload.php',
isUpload:true,
form:'upform',
success:function(){
Ext.Msg.alert('upfile','文件上传成功!');
}
});
});
form id="upform"
请选择文件:input type="file" name="imgFile"/
input type="button" id="btn" value="上传"/
/form
?php
if(!isset($_FILES['imgFile'])){
echo json_encode(array("success"=false, 'msg'="Not get Imgfile"));
return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上传文件的文件名
$type=$upfile["type"];//上传文件的类型
$size=$upfile["size"];//上传文件的大小
$tmp_name=$upfile["tmp_name"];//上传文件的临时存放路径
$error_cod=$upfile["error"];
if ($error_cod0){
echo json_encode(array("success"=false, 'msg'=$error_cod));
}
$photo_tmp_file_name= //这里设置存放路径
move_uploaded_file($tmp_name,$photo_tmp_file_name); //存储文件
?
ExtJs中怎么上传文件
在formpanal中增加一个fileUpload的属性就可以直接上传了:
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
renderTo:'file',
labelAlign: 'right',
title: '文件上传',
labelWidth: 60,
frame:true,
url: 服务器处理上传功能的url地址,//fileUploadServlet
width: 300,
height:200,
fileUpload: true,
items: [{
xtype: 'textfield',
fieldLabel: '文件名',
name: 'file',
inputType: 'file'//文件类型
}],
buttons: [{
text: '上传',
handler: function() {
form.getForm().submit({
success: function(form, response){
Ext.Msg.alert('信息', response.result.msg);
},
failure: function(){
Ext.Msg.alert('错误', '文件上传失败');
}
});
}
}]
});
});