Ext.Html5Uploader = Ext.extend(Ext.Window, {
width: 500, height: 500, title: "Image upload", shim: true, plain: true,
uploadAll: function () {
this.store.each(function (r) {
this.uploadPhoto(r);
}, this);
},
uploadSelected: function () {
Ext.each(this.view.getSelectedRecords(), function (r) {
this.uploadPhoto(r);
}, this);
},
uploadPhoto: function (photo) {
if (photo.data.uploaded) return;
var store = this.store;
var n = Ext.fly(this.view.getNodeByRecord(photo));
n.child('div.html5-thumb-progress-holder').show();
var progress = n.child('div.html5-thumb-progress');
var uploaded = n.child('div.html5-thumb-uploaded');
var xhr = new XMLHttpRequest();
xhr.open('post', '/Upload-RPC', true);
xhr.upload.onprogress = function (p) {
return function (e) {
if (e.lengthComputable) {
var percentage = Math.round(e.loaded / e.total * 105);
p.setWidth(percentage);
}
}
}(progress);
xhr.upload.onload = function (p) {
return function (e) {
uploaded.show();
photo.data.uploaded = true;
p.setWidth(105);
store.remove.defer(2000, store, [photo]);
}
}(progress);
var fd = new FormData();
fd.append("file", photo.data.file);
fd.append("ext", photo.data.ext);
xhr.send(fd);
},
deleteSelected: function () {
this.store.remove(this.view.getSelectedRecords());
},
deleteAll: function () {
this.store.removeAll();
},
deleteComplated: function () {
this.store.each(function (r) {
if (r.data.uploaded) {
this.store.remove(r);
}
}, this);
},
addImage: function () {
document.getElementById("upload-form").click();
},
initComponent: function () {
this.addBtn = new Js3.Button({
text: '添加',
preventDefault: false,
handler: this.addImage
});
this.items = this.createCenterPanel();
this.buttons = [
{
text: '上传',
scope: this,
handler: this.uploadAll
/*menu: [
{
text: '上传所有项',
scope: this,
handler: this.uploadAll
},
{
text: '上传选中项',
scope: this,
handler: this.uploadSelected
}
]*/
},
{
text: '清空',
scope: this,
handler: this.deleteAll/*
menu: [
{
text: '清空已完成项',
scope: this,
handler: this.deleteComplated
},
{
text: '清空所有项',
scope: this,
handler: this.deleteAll
}
]*/
},
this.addBtn,
{
text: '删除',
scope: this,
handler: this.deleteSelected
},
{
text: '关闭',
scope: this,
handler: function () {
this.close();
}
}
];
var jthis = this;
Ext.get("upload-form").on("change", function () {
if (!this.dom.value) {
return;
}
var ext = weoso.getExplorer().selNode.attributes.ext;
var app = Weoso.ApplicationTypes[ext];
if (!app || !app.imageUploadType) {
return;
}
jthis.invokeUploader(this.dom.files, app.imageUploadType);
this.dom.value = "";
});
Ext.Html5Uploader.superclass.initComponent.call(this);
},
createCenterPanel: function () {
if (!this.view) {
var store = this.store = new Ext.data.Store({reader: new Ext.data.JsonReader({id: "id",
fields: [
{name: 'name'},
{name: 'ext'},
{name: 'type'},
{name: 'uploaded'},
{name: 'size', type: 'float'},
{name: 'lastmod', type: 'date', dateFormat: 'timestamp'},
{name: 'file'},
{name: 'src'}
]})});
this.TStore = Ext.data.Record.create([
{name: 'name'},
{name: 'ext'},
{name: 'type'},
{name: 'uploaded'},
{name: 'size', type: 'float'},
{name: 'lastmod', type: 'date', dateFormat: 'timestamp'},
{name: 'file'},
{name: 'src'}
]);
this.view = new Ext.DataView({
multiSelect: true,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.html5-thumb-wrap',
autoScroll: true,
width:500,
height:425,
store: store,
updateIndexes: function (startIndex, endIndex) {
var ns = this.all.elements,
records = this.store.getRange();
startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
for (var i = startIndex; i <= endIndex; i++) {
ns[i].viewIndex = i;
ns[i].viewRecordId = records[i].id;
}
},
getNodeByRecord: function (record) {
var ns = this.all.elements,
ln = ns.length,
i = 0;
for (; i < ln; i++) {
if (ns[i].viewRecordId === record.id) {
return ns[i];
}
}
return null;
},
tpl: [
'<tpl for=".">',
'<div class="html5-thumb-wrap">',
'<div class="html5-thumb-uploaded"></div>',
'<div class="html5-thumb"><img src="{src}"/>',
'<div class="html5-thumb-progress-holder"><div class="html5-thumb-progress"></div></div>',
'</div><span>{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'],
listeners: {
afterrender: function () {
/*var jthis = this;
console.log(this.addBtn.el);
this.addBtn.el.createChild({
tag: 'input',
type: 'file',
style: 'width:100%',
size: 1
}).on('change', function () {
jthis.invokeUploader(this.dom.files);
});*/
},
itemcontextmenu: function (dataView, record, item, index, e) {
var jthis = this;
jthis.view.getSelectionModel().select(record);
e.stopEvent();
/*menu.showAt(e.getXY());
menu.doConstrain();*/
},
scope: this
}
});
}
return this.view;
},
filter: function (files) {
var arrFiles = [];
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("image") == 0 || (!file.type && /\.(?:jpg|png|gif)$/.test(file.name) /* for IE10 */)) {
if (file.size >= 512000) {
Ext.MessageBox.alert("weOSo", "The image " + file.name + " mush small than 500k");
} else {
arrFiles.push(file);
}
} else {
Ext.MessageBox.alert("weOSo", "The file is not image!");
}
}
return arrFiles;
},
invokeUploader: function (files, ext) {
files = this.filter(files);
var store = this.store;
var TStore = this.TStore;
var view = this.view;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
var r = new TStore({
name: file.name,
size: file.fileSize,
type: file.type,
file: file,
ext: ext,
lastmod: file.lastModifiedDate
});
store.add(r);
reader.onload = (function (r) {
return function () {
var img = Js3.get(view.getNodeByRecord(r)).down('div.html5-thumb').first();
img.on('load', function (g) {
return function () {
var scale = 80 / this.getHeight();
var width = this.getWidth();
var height = this.getHeight();
if (width > 120) {
scale = 120 / width;
width = 120;
height = height * scale;
}
if (height > 80) {
scale = 80 / height;
height = 80;
width = width * scale;
}
if (this.getWidth() < 80 && this.getHeight() < 120) {
this.setWidth(this.getWidth());
this.setHeight(this.getHeight());
var top = (80 - this.getWidth()) / 2;
var left = (120 - this.getHeight()) / 2;
this.setStyle({
position: 'absolute',
top: top,
left: left
});
} else {
this.setWidth(width);
this.setHeight(height);
}
}
}(r));
img.dom.src = this.result;
}
})(r);
reader.readAsDataURL(file);
}
}
});
Ext.Html5UploadInvoker = Ext.extend(Ext.util.Observable, {dropEffect: "copy",
targetSelector: ".z-resource-grid", overCls: "z-html5-dragover", dragDelay: 500,
constructor: function (cfg) {
Ext.apply(this, cfg);
this.addEvents({drop: true, dragover: true, dragout: true, beforeDrop: true, sizeExceeded: true});
Ext.Html5UploadInvoker.superclass.constructor.apply(this, arguments);
this.initUploader();
var edom = this.owner.explorer.getCenterPanel().el.dom;
Ext.EventManager.addListener(edom, "drop", this.onDrop, this);
//Ext.EventManager.addListener(Js3.getBody().dom, "dragover", this.onDragOver, this);
//Ext.EventManager.addListener(edom, "dragleave", this.onDragOut, this)
},
initUploader: function () {
if (!this.uploader) {
this.uploader = new Js3.Html5Uploader();
this.uploader.on("close", function () {
xt_datetime = new Date().getTime();
weoso.getExplorer().reload();
}, this);
this.relayEvents(this.uploader, ["beforeUpload", "start", "abort", "finish", "error"])
}
//this.uploader.show();
},
showUploader: function () {
this.uploader.show();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var ext = this.owner.explorer.selNode.attributes.ext;
var app = Weoso.ApplicationTypes[ext];
if (!app || !app.imageUploadType) {
return;
}
var files = e.browserEvent.target.files || e.browserEvent.dataTransfer.files;
this.uploader.show();
this.uploader.invokeUploader(files, app.imageUploadType);
}
});
运行效果：
相关推荐
本教程将深入探讨如何在ExtJS中实现图片的批量上传功能，以及与之相关的批量删除操作。 首先，批量上传图片的核心是利用HTML5的File API，它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...
在IT领域，批量图片预览上传是Web应用中常见的功能，尤其在图像处理、社交媒体或者内容管理系统中。本文将深入探讨如何使用EXTJS框架结合...理解并掌握这些知识点，能帮助开发者构建高效、安全的批量图片上传功能。
在"Extjs图片上传 带过滤和缩略图"这个主题中，我们将深入探讨如何使用ExtJS实现图片上传功能，同时结合过滤和缩略图显示，以提升用户体验。 1. **图片上传组件**： 在ExtJS中，可以使用`Ext.form.FileField`或`...
在本文中，我们将深入探讨如何使用ExtJs框架实现图片的批量显示、上传和删除功能...以上就是使用ExtJs实现图片批量显示、上传和删除的核心技术和流程，通过熟练掌握这些知识点，你可以构建出高效、易用的图片管理系统。
这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先，我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...
这个主题主要关注如何在ExtJS的HTMLEditor中实现图片的上传和添加网络图片功能。 首先，理解ExtJS HTMLEditor的基本结构和工作原理是至关重要的。HTMLEditor是一个组件，它可以将HTML代码作为输入，并提供类似于...
本文将深入探讨如何使用EXTJS来实现图片上传，包括多图预览、上传以及删除功能，并结合给定的文件名，分析基于JSP的后端处理。 EXTJS是Sencha公司推出的一款JavaScript库，主要用于构建桌面级的Web应用程序。它提供...
本资源提供了一个完整的ExtJS4 htmleditor图片上传插件，包括前端和后端的实现代码，对于开发者来说是一份非常有价值的参考资料。 首先，我们来看`htmleditor`组件。在ExtJS4中，`Ext.form.field.HtmlEditor`是HTML...
在"ExtJS带进度条的多文件上传和图片预览"这个项目中，它展示了如何利用ExtJS来实现一个高效且用户友好的文件上传功能，尤其适用于处理大量或大体积的文件。下面将详细介绍这个项目中的关键知识点。 1. **ExtJS组件...
在多图片批量上传的场景中，ExtJS可能使用了`FileInput`或`FileField`组件来捕获用户选择的文件，以及`UploadButton`或自定义的`FormPanel`来实现文件上传功能。此外，ExtJS还可能利用Ajax技术，通过异步方式将文件...
这个插件是作者对原有Swfupload组件进行改进后得到的，特别适用于需要在Web应用中实现批量图片上传的场景。 首先，我们来了解一下Extjs。Extjs是一个强大的JavaScript库，用于构建富客户端的Web应用。它提供了丰富...
在"EXTJS3.0多文件上传组件"中，我们主要关注的是如何利用EXTJS3.0的功能来实现一个高效的、用户友好的多文件上传功能。 首先，`swfupload.js`是Flash-Based的文件上传库，它允许用户在不离开当前页面的情况下进行...
在ExtJS中，有时候我们需要实现文件上传功能，特别是大文件或图片的上传。在早期的Web开发中，由于HTML5的File API还未广泛支持，Flash成为了实现复杂上传功能的一个常见选择。本篇文章将详细介绍如何在ExtJS中利用...
在“Extjs多文件上传”这个主题中，我们将深入探讨如何使用ExtJS实现一个支持自由添加和减少上传文件个数的多文件上传功能。 首先，ExtJS的文件上传功能通常依赖于其组件系统，特别是`Ext.form.FileField`（也称为`...
本文将深入探讨“extjs多文件上传”这一主题，结合标签“源码”和“工具”，我们将主要关注如何使用ExtJS库实现这一功能，并可能涉及第三方上传工具Plupload。 首先，ExtJS是一个基于JavaScript的UI框架，它提供了...
在本文中，我们将深入探讨如何在ExtJS4框架中整合SWFUpload库，实现多文件上传功能。ExtJS4是一个强大的JavaScript组件库，用于构建富客户端应用，而SWFUpload则是一个流行的选择，用于在浏览器中实现文件上传，特别...
在IT行业中，网页开发经常会遇到文件上传的需求，而"jSP+EXTJS实现upload UploadDialog"就是一种常见的解决方法。这个话题主要涵盖了两个关键部分：JavaServer Pages (JSP) 和 ExtJS，它们共同用于创建一个具有文件...
结合描述中的“点击上传弹出上传对话框”，我们可以推测这个项目中，当用户在由ExtJS构建的前端界面上点击“上传”按钮后，会触发一个事件，这个事件会利用HTML5的File API来打开操作系统级的文件选择对话框。...
随着Flash技术的逐渐淘汰，将KindEditor中原有的基于Flash的图片批量上传方式替换为H5（HTML5）上传，这是一个必要的优化步骤。HTML5引入了File API，使得在浏览器中处理文件变得更加便捷和安全。通过使用`...
总结来说，“超漂亮的ExtJS界面的JSP图片上传系统”结合了ExtJS的优秀界面设计和JSP的强大后端处理能力，实现了高效、美观的图片上传功能。通过深入研究该项目，开发者不仅可以提升自己的前端和后端开发技能，还能...