上传表单(Upload Forms)[PHP版]

Posted 周三, 06/04/2008 - 22:26 by admin

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

为了更方便asp.net的会员，于是写了另一篇上传表单(Upload Forms)[ASP.NET版]的。请点击这里查看.

演示(demo)地址在文章最后.

效果图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

关键字:
- 表单(Forms)

要发表评论，请先登录

此网站的设计是太棒了。我怎么能成为最佳网页设计师！并希望我的概念，明确 testking 000-061。和以及其他重要的一个 testking JN0-311 这些考试/证书考虑在IT领域的土地的标志。我希望会有一个单独的部分为 testking 70-293 以及与此相关的其他条款。

要发表评论，请先登录

php的看不懂，能不能给个.net例子

by 游客 - 07/04/2008 - 12:53

上面的php的代码看不懂，能不能给个.net例子，谢谢。

要发表评论，请先登录

已加上 ASP.NET 的例子

by admin - 07/07/2008 - 14:17

详细请点击上传表单(Upload Forms)[ASP.NET版]

要发表评论，请先登录

尽快加上asp.net例子

by admin - 07/05/2008 - 00:11

我将会在下个星期三之前更新一个 asp.net(C#) 版本的上传表单到网站上来。

敬请期待！

要发表评论，请先登录

目录下没有文件检测上传程序的方法

by admin - 06/05/2008 - 23:36

1、去掉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."'}";

?>

2、写一个普通的HTML先测试一下你的上传程序有无问题。


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>upload test</title>
</head>

<body>
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="upload.php">
  <label>
  <input type="file" name="userfile" id="userfile" />
  </label>
  <label>
  <input type="submit" name="button" id="button" value="提交" />
  </label>
</form>
</body>
</html>