Ext上传图片

来源：互联网发布：手机端js日期选择控件编辑：程序博客网时间：2024/05/17 04:33

Ext是基于javscript脚本语言的一种编程框架，主要用于创建（B/S）客户端用户界面，借助与本身自带的Ajax框架的优势，撇开了对后台编程语言的依赖性。同时，客户端程序与服务器程序达到一种完全的分离，彼此之间可以相互独立的进行开发及维护。

以上，对Ext的构成及作用做了一下简单的介绍，下面我将根据个人的经验仔细的介绍Ext中关于文件上传的想关知识，如有不当之处请诸位多多指教。

在做Ext上传文件之前，我们除了Ext本身库以外还需要下载FileUploadField控件的源文件，并将其放置Ext相应的目录下，此文件我们可以直接去其官方网站去下载。

下载地址：http://www.extjs.com/deploy/dev/examples/form/FileUploadField.js

下面我们来实现具体的代码吧！实现文件上传功能，我们需要分开编写客户端代码和服务端代码（服务端代码用C#编写）。

客户端代码：file-upload.js

Ext.onReady(function(){

Ext.QuickTips.init();

var fp = new Ext.FormPanel({

renderTo: 'fi-form',

fileUpload: true, //标志此表单数据中包含文件数据

width: 500,

frame: true,

title: '上传文件',

autoHeight: true,

bodyStyle: 'padding: 10px 10px 0 10px;',

labelWidth: 50,

defaults: {

anchor: '95%',

allowBlank: false,

msgTarget: 'side'

items: [{

xtype: 'textfield',

fieldLabel: '文件名称'

},{

xtype: 'fileuploadfield', //表单域类型

id: 'form-file',

emptyText: '请您选择文件',

fieldLabel: 'Photo',

name: '文件路径',

buttonCfg: {

text: '',

iconCls: 'upload-icon' //按钮图标

}

}],

buttons: [{

text: '保存',

handler: function(){

if(fp.getForm().isValid()){

fp.getForm().submit({

url: 'upload.aspx', //后台处理页面（可以是php，asp，aspx，jsp等等）

waitMsg: '正在上传...',

success: function(fp, o){

Ext.MessageBox.alert('恭喜您', '上传 "'+o.result.file+'" 成功！');

}

});

}

},{

text: '重置',

handler: function(){

fp.getForm().reset();

}

}]

});

页面代码：index.html

<html>

<head>

<style>

.upload-icon {

background: url('../shared/icons/fam/image_add.png') no-repeat 0 0 !important;

}

#fi-button-msg {

border: 2px solid #ccc;

padding: 5px 10px;

background: #eee;

margin: 5px;

float: left;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

后台关键(C#)代码如下：

string filename = String.Empty;

try {

HttpFileCollection files = Request.Files; //获取客户端表单中的所有上传文件

for (int i = 0; i < files.Count; i++) {

HttpPostedFile hpf = files[i];

filename = Path.GetFileName(hpf.FileName);//获取文件名称

filename = savePath + filename; //获取服务端保存路径名称

hpf.SaveAs(filename); //保存文件

}

catch {

response.Write("{/"success/":/"false/",/"message/":/"文件上传失败！/"}");

return false;

}

response.Write("{/"success/":/"true/",/"message/":/"文件上传成功！/"}");

演示图形如下：

然后选择相应的文件就可以了,点击保存就可以了 ~~

本文主要用C# 主要是因为上次我在网上找相关代码没有直接找到这给好多和我类似朋友造成了障碍，鄙人深有感触，因此下绝心写了此篇文章，希望能给各位一点点帮助，以后我会坚持写相似的东西的，也希望大家多多光顾多多指教，我会和大家一起努力，共同提高，争取我们玩IT犹如在打乒乓球一样，嘿嘿~