您的位置：首页 > Web前端 > JavaScript

无废话ExtJs 入门教程十三[上传图片：File]

2014-02-10 10:21 465 查看

1.代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/Ext/ext-all.js"></script>
<script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<script type="text/javascript">
Ext.onReady(function () {
//初始化标签中的Ext:Qtip属性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//创建div组件
var imagebox = new Ext.BoxComponent({
autoEl: {
style: 'width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px',
tag: 'div',
id: 'imageshow',
html: '暂无图片'
}
});
//创建文本上传域
var file = new Ext.form.TextField({
name: 'imgFile',
fieldLabel: '文件上传',
inputType: 'file',
allowBlank: false,
blankText: '请浏览图片'
});
//提交按钮处理方法
var btnsubmitclick = function () {
if (form.getForm().isValid()) {
form.getForm().submit({
waitTitle: "请稍候",
waitMsg: '正在上传...',
success: function (form, action) {
Ext.MessageBox.alert("提示", "上传成功！");
document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';
},
failure: function () {
Ext.MessageBox.alert("提示", "上传失败！");
}
});
}
}
//重置按钮"点击时"处理方法
var btnresetclick = function () {
form.getForm().reset();
}
//表单
var form = new Ext.form.FormPanel({
frame: true,
fileUpload: true,
url: '/App_Ashx/Demo/Upload.ashx',
title: '表单标题',
style: 'margin:10px',
items: [imagebox, file],
buttons: [{
text: '保存',
handler: btnsubmitclick
}, {
text: '重置',
handler: btnresetclick
}]
});
//窗体
var win = new Ext.Window({
title: '窗口',
width: 476,
height: 374,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
buttonAlign: 'center',
items: form
});
win.show();
});
</script>
</head>
<body>
<!--
说明：
(1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。
官方解释如下：
This may then be added to a Container as a child item.
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:
(2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暂无图片'}定义这个html标记的属性，如 标记为：div，id是多少等。
官方实例为：
var myImage = new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: '/images/my-image.jpg'
}
});
(3)var file = new Ext.form.TextField()：创建一个新的文件上传域。
(4)name: 'imgFile':名称，重要，因为service端要根据这个名称接收图片。
(5)inputType: 'file'：表单类型为文件类型。
(6)waitTitle: "请稍候",waitMsg: '正在上传...',：上传等待过程中的提示信息。
(7)document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';这个是原生态的js，把imageshow的值换成图片。
-->
</body>
</html>

其中与service交互用上传图片的一般处理程序文件，源码如下：

/App_Ashx/Demo/Upload.ashx

using System;
using System.Web;
using System.IO;
using System.Globalization;

namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
{
public class Upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//虚拟目录，建议写在配置文件中
String strPath = "/Upload/Image/";
//文件本地目录
String dirPath = context.Server.MapPath(strPath);
//接收文件
HttpPostedFile imgFile = context.Request.Files["imgFile"];
//取出文件扩展名
String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
//重新命名文件
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
//文件上传路径
String filePath = dirPath + newFileName;
//保存文件
imgFile.SaveAs(filePath);
//客户端输出
context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

2.效果如下：

3.说明：

(1)上传域不光可以上传图片，还要以上传其他文件。这里我们以图片为例。

(2)在实际开发中，我们还要对图片格式，大小等进行校验，这个示例测重于上传，没有加入任何校验。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： c# asp.net javascript extjs

相关文章推荐

新的分享

章节导航