Extjs php fileupload

最新推荐文章于 2021-03-22 19:16:07 发布

原创最新推荐文章于 2021-03-22 19:16:07 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#PHP #EXT #CSS #JavaScript #prototype #ViewUI

ext 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用ExtJS库实现的文件上传示例。通过创建一个包含文件输入字段的表单，并利用ExtJS的功能来处理文件上传流程。文章还提供了一个简单的PHP脚本来处理上传请求。

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>&nbsp;</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."'}";
?>