上传表单(Upload Forms)

maiguang

浏览: 262440 次
性别:
来自: 焦作

最近访客更多访客>>

xuyongff

east_zyd_zhao

nosuchperson

yangheqingvip

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs+JAVASCRIPT

EXT CSS JavaScript PHP prototype

ExtJs的文件上传功能官方的例子中并没有，但做网站的都知道，这个功能在十个系统中九个可能都需要这样的功能。废话少说，下面一起来分享一下ExtJs上传文件功能。

效果图1（上传前）：

效果图2（上传后）：

该程序包括三个文件，一个文件件。如下图

源代码：
upload.html

以下为引用的内容：

<html>
<head>
    <title>Uploading</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="text/javascript" src="upload.js"></script>
    <link rel="stylesheet" type="text/css" href="forms.css"/>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../examples.css"/>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<!-- EXAMPLES -->
<h1>Upload with Forms</h1>

<p>The js is not minified so it is readable. See 
<a href="upload.js">upload.js</a>.</p>
<p> </p>
<p><a href="javascript:window.location.reload();">reload</a></p>
</body>
</html>

Upload.js

以下为引用的内容：

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; 
Ext.onReady(function() {
  var form = new Ext.form.FormPanel({
    baseCls: 'x-plain',
    labelWidth: 80,
    url:'upload.php',
    fileUpload:true,
    defaultType: 'textfield',

    items: [{
      xtype: 'textfield',
      fieldLabel: 'File Name',
      name: 'userfile',
      inputType: 'file',
      allowBlank: false,
      blankText: 'File can\'t not empty.',
      anchor: '90%'  // anchor width by percentage
    }]
  });

  var win = new Ext.Window({
    title: 'Upload file',
    width: 400,
    height:200,
    minWidth: 300,
    minHeight: 100,
    layout: 'fit',
    plain:true,
    bodyStyle:'padding:5px;',
    buttonAlign:'center',
    items: form,

    buttons: [{
      text: 'Upload',
      handler: function() {
        if(form.form.isValid()){
          Ext.MessageBox.show({
               title: 'Please wait',
               msg: 'Uploading...',
               progressText: '',
               width:300,
               progress:true,
               closable:false,
               animEl: 'loding'
             });
          form.getForm().submit({    
            success: function(form, action){
               Ext.Msg.alert('Message from extjs.org.cn',action.result.msg);
               win.hide();  
            },    
             failure: function(){    
              Ext.Msg.alert('Error', 'File upload failure.');    
             }
          })           
        }
       }
    },{
      text: 'Close',
      handler:function(){win.hide();}
    }]
  });
  win.show();
});

upload.php

以下为引用的内容：
<?php
//上传文件全称
$uploadfile = "upload_files/".basename($_FILES['userfile']['name']);

$message = "";
if (@move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
$message = "File was successfully uploaded.";
}
else
{
$message = "Possible file upload attack!";
}

print "{success:true,msg:'".$message."'}";
?>

还需要在当前目录创建一个文件夹upload_files，并将该文件夹设置为777(everyone 可读写).

演示地址：http://extjs.org.cn/extjs/examples/form/upload.html

由 LovelyLife 编辑 <script> editor.innerText = szEditor;</script>

分享到：

调情是言辞艺术里的示爱绝招 | 揭秘残酷朱元璋：陪葬妃子被活活灌水银而死 ...

2008-11-07 12:45
浏览 1631
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论