当前位置:首页 » 文件传输 » extjs文件上传
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

extjs文件上传

发布时间: 2022-02-28 13:48:20

Ⅰ extjs 要在选择按钮后增加一个上传按钮,

单个按钮的话,参考如下,如果你是想通过两个按钮来表达开关稍作扩展即可:

new Ext.Button ({
scale:'Large',
fieldLabel :'是否',
iconAlign : 'left',
id : 'ynButton',
tag : 'Y',
handler :function(button){
if(button.tag == 'N'){
button.tag = 'Y';
Ext.getDom(button.getId()).innerHTML ='Y图片';
}else if(button.tag=='Y'){
button.tag= 'N';
Ext.getDom(button.getId()).innerHTML ='N图片';
}
}
})

Ⅱ 前台用extjs的form 上传文件 请问后台用java如何处理

java代码中对文件上传的处理可以参考struct的文件上传,但是在返回处理结果时必须设置
response.setContentType("text/HTML");
否则文件上传后,会出现一个下载对话框;
var formPanel = new Ext.FormPanel({ }) 中必须加入fileUpload:true;
否则不会实现文件上传;而且ext对文件上传时,不会将formPanel 中存在的参数进行提交~

Ⅲ 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','文件上传成功!');
}
});
});
<formid="upform">
请选择文件:<inputtype="file"name="imgFile"/>
<inputtype="button"id="btn"value="上传"/>
</form>
<?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));
}
$photo_tmp_file_name=//这里设置存放路径
move_uploaded_file($tmp_name,$photo_tmp_file_name);//存储文件
?>

Ⅳ ExtJs可以限制上传文件的格式吗

ExtJs能不能不知道(貌似不可以),但是可以用别的方式达到。给你提供个思路:比如你限制仅能上传txt,pdf,xml,doc格式的文件,上传时,先获取上传的文件名,截取文件的后缀名(这个很简单,用split功能就可以了,以 .(点)作为分隔符),然后跟允许的上传格式字符对比,如果不同,则不允许上传,相同则允许(其实用正则表达式也是可以的)。比如:
var a="filename.pdf"(文件名自己去获取)
var b=a.split(".")(截取之后是个数组["filename","pdf"])
b[1]就是后缀名pdf
这样再对比:if(
b[1]
.toLowerCase()==‘pdf’)
alert("ok");

Ⅳ extjs怎样做图片上传

1.代码如下:
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
10 <!--ExtJs框架结束-->
11 <script type="text/javascript">
12 Ext.onReady(function () {
13 //初始化标签中的Ext:Qtip属性。
14 Ext.QuickTips.init();
15 Ext.form.Field.prototype.msgTarget = 'side';
16 //创建div组件
17 var imagebox = new Ext.BoxComponent({
18 autoEl: {
19 style: 'width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px',
20 tag: 'div',
21 id: 'imageshow',
22 html: '暂无图片'
23 }
24 });
25 //创建文本上传域
26 var file = new Ext.form.TextField({
27 name: 'imgFile',
28 fieldLabel: '文件上传',
29 inputType: 'file',
30 allowBlank: false,
31 blankText: '请浏览图片'
32 });
33 //提交按钮处理方法
34 var btnsubmitclick = function () {
35 if (form.getForm().isValid()) {
36 form.getForm().submit({
37 waitTitle: "请稍候",
38 waitMsg: '正在上传...',
39 success: function (form, action) {
40 Ext.MessageBox.alert("提示", "上传成功!");
41 document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';
42 },
43 failure: function () {
44 Ext.MessageBox.alert("提示", "上传失败!");
45 }
46 });
47 }
48 }
49 //重置按钮"点击时"处理方法
50 var btnresetclick = function () {
51 form.getForm().reset();
52 }
53 //表单
54 var form = new Ext.form.FormPanel({
55 frame: true,
56 fileUpload: true,
57 url: '/App_Ashx/Demo/Upload.ashx',
58 title: '表单标题',
59 style: 'margin:10px',
60 items: [imagebox, file],
61 buttons: [{
62 text: '保存',
63 handler: btnsubmitclick
64 }, {
65 text: '重置',
66 handler: btnresetclick
67 }]
68 });
69 //窗体
70 var win = new Ext.Window({
71 title: '窗口',
72 width: 476,
73 height: 374,
74 resizable: true,
75 modal: true,
76 closable: true,
77 maximizable: true,
78 minimizable: true,
79 buttonAlign: 'center',
80 items: form
81 });
82 win.show();
83 });
84 </script>
85 </head>
86 <body>
87 <!--
88 说明:
89 (1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。
90 官方解释如下:
91 This may then be added to a Container as a child item.
92 To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:
93 (2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暂无图片'}定义这个html标记的属性,如 标记为:div,id是多少等。
94 官方实例为:
95 var myImage = new Ext.BoxComponent({
96 autoEl: {
97 tag: 'img',
98 src: '/images/my-image.jpg'
99 }
100 });
101 (3)var file = new Ext.form.TextField():创建一个新的文件上传域。
102 (4)name: 'imgFile':名称,重要,因为service端要根据这个名称接收图片。
103 (5)inputType: 'file':表单类型为文件类型。
104 (6)waitTitle: "请稍候",waitMsg: '正在上传...',:上传等待过程中的提示信息。
105 (7)document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';这个是原生态的js,把imageshow的值换成图片。
106 -->
107 </body>
108 </html>
复制代码
其中与service交互用上传图片的 一般处理程序文件,源码如下:
/App_Ashx/Demo/Upload.ashx
复制代码
1 using System;
2 using System.Web;
3 using System.IO;
4 using System.Globalization;
5
6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
7 {
8 public class Upload : IHttpHandler
9 {
10 public void ProcessRequest(HttpContext context)
11 {
12 //虚拟目录,建议写在配置文件中
13 String strPath = "/Upload/Image/";
14 //文件本地目录
15 String dirPath = context.Server.MapPath(strPath);
16 //接收文件
17 HttpPostedFile imgFile = context.Request.Files["imgFile"];
18 //取出文件扩展名
19 String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
20 //重新命名文件
21 String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
22 //文件上传路径
23 String filePath = dirPath + newFileName;
24 //保存文件
25 imgFile.SaveAs(filePath);
26 //客户端输出
27 context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}");
28 }
29
30 public bool IsReusable
31 {
32 get
33 {
34 return false;
35 }
36 }
37 }
38 }
复制代码
2.效果如下:
无废话extjs
3.说明:
(1)上传域不光可以上传图片,还要以上传其他文件。这里我们以图片为例。
(2)在实际开发中,我们还要对图片格式,大小等进行校验,这个示例测重于上传,没有加入任何校验。

Ⅵ extjs4中怎么上传多个文件上传

用swfupload吧,这个可以实现,不知道jquery.uploadify可不可以集成到Extjs里,总之swfupload绝对可以,曾经实现过,不过lz应该要研究不少时间,单纯的input type='file'就不用想了

Ⅶ Extjs 如何实现上传及下载功能。

其实,EXTJS4.0中有自带的上传控件 ,你引用一下就行了
关键在于,你上传的文件是保存在数据库中,还是保存在服务器的硬盘上
保存在数据库中要化成二进制流,但缺点是文件大的时候,数据库很麻烦,并且写进数据库要转换,读出来也要转化
如果保存在服务器上,只在数据库中保存路径,然后就可以根据路径来下载,
删除的时候,也同样根据路径要删除服务器上的文件和数据库中的文件信息

祝你好运,如何你不明白的话,我可以给你源码看一下,之前我做的上传,下载和删除功能。

Ⅷ Extjs上传文件 form.submit({})后,一直在上传,进不了后台,

既然已经报错了,可能根本就没有和后台交互。你应该关注Argument 1 of Node.appendChild is not an object.这个是哪段代码引起的

Ⅸ ExtJs中怎么上传文件

下面为大家介绍在ExtJs中上传文件的几种方法
第一种方法:传统的上传方式
在formpanal中增加一个fileUpload的属性
例子代码:
JScript 代码 复制
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('错误', '文件上传失败');
}
});
}
}]
});

});

第二种方法:借助Ext.ux.UploadDialog.Dialog的组件,在编码时需要导入两个文件
需要引入 Ext.ux.UploadDialog 样式文件 和 Ext.ux.UploadDialog.packed脚本文件。
例子代码
//在使用此方法进行文件上传时,其后台往页面的返回值类型是这样的:
//{'success':true,'message':'上传成功'}
//如果没有success:true,无论上传成功与否,显示的都是上传失败,其实这个和form.submit()的提交方式是一个道理。
var dialog = new Ext.ux.UploadDialog.Dialog({
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','xls','XLS'],
proxyDrag: true,
resizable: true,
constraintoviewport: true,
title: '文件上传',
url:用于处理上传文件功能的Url,
reset_on_hide: false,
allow_close_on_upload: true ,
upload_autostart: false
});
//定义上传文件的按钮
var btnShow = new Ext.Button({
text:'上传文件',
listeners:{
click:function(btnThis,eventobj){
dialog.show();
}
}
});