Java 使用ExtJS 6拖放文件
我目前有一个webapp,它的视图是用extjs6编写的:我们目前使用一个javaapplet,其目的是允许用户将文件从文件系统拖放到Web服务器。 我的目标是删除该applet,并使用ExtJS6处理拖放:这可能吗Java 使用ExtJS 6拖放文件,java,extjs,drag-and-drop,applet,extjs6,Java,Extjs,Drag And Drop,Applet,Extjs6,我目前有一个webapp,它的视图是用extjs6编写的:我们目前使用一个javaapplet,其目的是允许用户将文件从文件系统拖放到Web服务器。 我的目标是删除该applet,并使用ExtJS6处理拖放:这可能吗 我试图在文档中搜索它,但我找到的唯一主题()是关于拖放框架元素。要支持文件拖放,可以使用以下选项: drop,dragstart,dragenter,dragover,dragleave,dragexit 一个有效的例子: 为了支持文件的拖放,您可以使用以下命令: drop,dra
我试图在文档中搜索它,但我找到的唯一主题()是关于拖放框架元素。要支持文件拖放,可以使用以下选项:
drop
,dragstart
,dragenter
,dragover
,dragleave
,dragexit
一个有效的例子:
为了支持文件的拖放,您可以使用以下命令:
drop
,dragstart
,dragenter
,dragover
,dragleave
,dragexit
一个有效的例子:
我正在使用在sencha论坛中找到的解决方案:
Ext.define('FileDropper', {
extend: 'Ext.plugin.Abstract',
alias: 'plugin.filedropper',
overCls: '',
init: function(c) {
this.target = c;
c.on({
element: 'el',
scope: this,
dragover: this.onDragOver,
dragenter: this.onDragEnter,
dragLeave: this.onDragLeave,
drop: this.onDrop
});
},
onDragOver: function(e) {
e.stopEvent();
},
onDragEnter: function(e) {
this.target.addCls(this.overCls);
e.stopEvent();
},
onDragLeave: function() {
this.target.removeCls(this.overCls);
},
onDrop: function(e) {
var callback = this.callback,
scope = this.scope || this;
e.stopEvent();
this.target.removeCls(this.overCls);
if (callback) {
callback.call(scope, e.browserEvent.dataTransfer.files);
}
}
});
将插件添加到视图中,如下所示:
Ext.define('MyPanel', {
extend: 'Ext.Panel',
// ... your content
plugins: [{
ptype: 'filedroppper'
overCls: 'foo'
callback: function(files) {
// handle your upload
}
}]
});
您只需处理回调中删除的文件:
callback: function (files) {
var url = 'example.org'
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
for (var i = 0; i < files.length; i++) {
fd.append('files', files.item(i));
}
// Initiate a multipart/form-data upload
xhr.send(fd);
}
回调:函数(文件){
var url='example.org'
var xhr=new XMLHttpRequest();
var fd=新FormData();
xhr.open(“POST”,url,true);
xhr.onreadystatechange=函数(){
如果(xhr.readyState==4&&xhr.status==200){
//处理响应。
警报(xhr.responseText);//处理响应。
}
};
对于(var i=0;i
但是如果您使用,请确保您不必支持旧浏览器。我正在使用我在sencha论坛中找到的解决方案:
Ext.define('FileDropper', {
extend: 'Ext.plugin.Abstract',
alias: 'plugin.filedropper',
overCls: '',
init: function(c) {
this.target = c;
c.on({
element: 'el',
scope: this,
dragover: this.onDragOver,
dragenter: this.onDragEnter,
dragLeave: this.onDragLeave,
drop: this.onDrop
});
},
onDragOver: function(e) {
e.stopEvent();
},
onDragEnter: function(e) {
this.target.addCls(this.overCls);
e.stopEvent();
},
onDragLeave: function() {
this.target.removeCls(this.overCls);
},
onDrop: function(e) {
var callback = this.callback,
scope = this.scope || this;
e.stopEvent();
this.target.removeCls(this.overCls);
if (callback) {
callback.call(scope, e.browserEvent.dataTransfer.files);
}
}
});
将插件添加到视图中,如下所示:
Ext.define('MyPanel', {
extend: 'Ext.Panel',
// ... your content
plugins: [{
ptype: 'filedroppper'
overCls: 'foo'
callback: function(files) {
// handle your upload
}
}]
});
您只需处理回调中删除的文件:
callback: function (files) {
var url = 'example.org'
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
for (var i = 0; i < files.length; i++) {
fd.append('files', files.item(i));
}
// Initiate a multipart/form-data upload
xhr.send(fd);
}
回调:函数(文件){
var url='example.org'
var xhr=new XMLHttpRequest();
var fd=新FormData();
xhr.open(“POST”,url,true);
xhr.onreadystatechange=函数(){
如果(xhr.readyState==4&&xhr.status==200){
//处理响应。
警报(xhr.responseText);//处理响应。
}
};
对于(var i=0;i
但如果使用,请确保不必支持旧浏览器。此窗口中包含的窗口允许用户将文件从文件系统拖放到Web服务器 源代码:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'size', 'file', 'status']
});
var postDocument = this.postDocument;
Ext.widget('container', {
renderTo: Ext.getBody(),
items: [{
multiSelect: true,
xtype: 'grid',
id: 'UploadGrid',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 2
}, {
header: 'Size',
dataIndex: 'size',
flex: 1,
renderer: Ext.util.Format.fileSize
}, {
header: 'Status',
dataIndex: 'status',
flex: 1,
renderer: this.rendererStatus
}],
viewConfig: {
emptyText: 'Drop Files Here',
deferEmptyText: false
},
store: store,
listeners: {
drop: {
element: 'el',
fn: 'drop'
},
dragstart: {
element: 'el',
fn: 'addDropZone'
},
dragenter: {
element: 'el',
fn: 'addDropZone'
},
dragover: {
element: 'el',
fn: 'addDropZone'
},
dragleave: {
element: 'el',
fn: 'removeDropZone'
},
dragexit: {
element: 'el',
fn: 'removeDropZone'
},
},
noop: function(e) {
e.stopEvent();
},
addDropZone: function(e) {
if (!e.browserEvent.dataTransfer || Ext.Array.from(e.browserEvent.dataTransfer.types).indexOf('Files') === -1) {
return;
}
e.stopEvent();
this.addCls('drag-over');
},
removeDropZone: function(e) {
var el = e.getTarget(),
thisEl = this.getEl();
e.stopEvent();
if (el === thisEl.dom) {
this.removeCls('drag-over');
return;
}
while (el !== thisEl.dom && el && el.parentNode) {
el = el.parentNode;
}
if (el !== thisEl.dom) {
this.removeCls('drag-over');
}
},
drop: function(e) {
e.stopEvent();
Ext.Array.forEach(Ext.Array.from(e.browserEvent.dataTransfer.files), function(file) {
store.add({
file: file,
name: file.name,
size: file.size,
status: 'Ready'
});
});
this.removeCls('drag-over');
},
tbar: [{
text: "Upload",
handler: function() {
for (var i = 0; i < store.data.items.length; i++) {
if (!(store.getData().getAt(i).data.status === "Uploaded")) {
store.getData().getAt(i).data.status = "Uploading";
store.getData().getAt(i).commit();
//replace "insert your upload url here" with the real url
postDocument("insert your upload url here", store, i);
}
}
}
}, {
text: "Erase EVERYTHING",
handler: function() {
store.reload();
}
}, {
text: "Erase uploaded files",
handler: function() {
for (var i = 0; i < store.data.items.length; i++) {
var record = store.getData().getAt(i);
if ((record.data.status === "Uploaded")) {
store.remove(record);
i--;
}
}
}
}, {
text: "Erase selected files",
handler: function() {
store.remove(Ext.getCmp('UploadGrid').getSelection());
}
}]
}],
padding: 20
});
},
rendererStatus: function(value, metaData, record, rowIndex, colIndex, store) {
var color = "grey";
if (value === "Ready") {
color = "blue";
} else if (value === "Uploading") {
color = "orange";
} else if (value === "Uploaded") {
color = "green";
} else if (value === "Error") {
color = "red";
}
metaData.tdStyle = 'color:' + color + ";";
return value;
},
postDocument: function(url, store, i) {
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("serverTimeDiff", 0);
xhr.open("POST", url, true);
fd.append('index', i);
fd.append('file', store.getData().getAt(i).data.file);
//xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.setRequestHeader("serverTimeDiff", 0);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//handle the answer, in order to detect any server side error
if (Ext.decode(xhr.responseText).success) {
store.getData().getAt(i).data.status = "Uploaded";
} else {
store.getData().getAt(i).data.status = "Error";
}
store.getData().getAt(i).commit();
} else if (xhr.readyState == 4 && xhr.status == 404) {
store.getData().getAt(i).data.status = "Error";
store.getData().getAt(i).commit();
}
};
// Initiate a multipart/form-data upload
xhr.send(fd);
}
});
Ext.application({
名字:“小提琴”,
启动:函数(){
var store=Ext.create('Ext.data.store'{
字段:[“名称”、“大小”、“文件”、“状态”]
});
var postDocument=this.postDocument;
Ext.widget('容器'{
renderTo:Ext.getBody(),
项目:[{
多选:对,
xtype:'网格',
id:“UploadGrid”,
栏目:[{
标题:“名称”,
数据索引:“名称”,
弹性:2
}, {
标题:“大小”,
数据索引:“大小”,
弹性:1,
渲染器:Ext.util.Format.fileSize
}, {
标题:“状态”,
数据索引:“状态”,
弹性:1,
渲染器:此为.renderStatus
}],
视图配置:{
emptyText:“将文件放在此处”,
DeferreEmptyText:false
},
店:店,,
听众:{
删除:{
元素:“el”,
fn:‘下降’
},
dragstart:{
元素:“el”,
fn:“addDropZone”
},
排水剂:{
元素:“el”,
fn:“addDropZone”
},
德拉戈弗:{
元素:“el”,
fn:“addDropZone”
},
dragleave:{
元素:“el”,
fn:“removeDropZone”
},
德拉格西特:{
元素:“el”,
fn:“removeDropZone”
},
},
noop:函数(e){
e、 stopEvent();
},
addDropZone:函数(e){
如果(!e.browserEvent.dataTransfer | | Ext.Array.from(e.browserEvent.dataTransfer.types).indexOf('Files')=-1){
返回;
}
e、 stopEvent();
此.addCls(‘拖拽’);
},
removeDropZone:功能(e){
var el=e.getTarget(),
thisEl=this.getEl();
e、 stopEvent();
if(el==thisEl.dom){
此选项。移除(“拖拽”);
返回;
}
while(el!==thisEl.dom&&el&&el.parentNode){
el=el.parentNode;
}
if(el!==thisEl.dom){
此选项。移除(“拖拽”);
}
},
删除:功能(e){
e、 stopEvent();
Ext.Array.forEach(Ext.Array.from(e.browserEvent.dataTransfer.files),函数(file){
store.add({
档案:档案,
name:file.name,
size:file.size,
状态:“就绪”
});
});