Ext实现文件上传至服务器的技巧和方法 (extjs 上传文件到服务器)

Ext是一种非常流行的JavaScript框架，它常常被用来搭建企业级级应用。其中很常用的功能就是文件上传，但是对于初学者来说，这可能是比较困难的一个任务。在这篇文章中，我们将会学习如何使用。

我们需要创建一个上传按钮。

“`javascript

{

xtype: ‘filefield’,

name: ‘file’,

fieldLabel: ‘选择文件’,

labelWidth: 60,

msgTarget: ‘side’,

allowBlank: false,

buttonConfig: {

text: ‘上传’,

cls: ‘upload-button’

}

}

“`

这个按钮使用了filefield组件，它会显示一个文件选择框。这个按钮会触发一个事件，使得我们能够在Ext中监视这个上传过程。

接下来，我们需要在服务器上创建一个脚本，以便能够接受和处理上传的文件。文件上传的数据格式是多部分表单数据，可以通过使用PHP、Node.js等语言进行处理。假设我们使用PHP语言来处理，我们可以写一个简单的上传脚本，如下所示：

“`php

$allowed = array(‘png’, ‘jpg’, ‘gif’);

$file = $_FILES[‘file’];

$extension = pathinfo($file[‘name’], PATHINFO_EXTENSION);

if (!in_array($extension, $allowed)) {

die(‘文件类型不被接受’);

}

move_uploaded_file($file[‘tmp_name’], ‘uploads/’ . $file[‘name’]);

echo ‘上传成功’;

?>

“`

这个脚本会检查上传的文件类型是否正确，并将文件移动到指定的目录中。如果一切顺利，它会显示一条成功消息。

接着，我们需要在Ext中编写代码，以便能够将这个文件上传到我们的服务器上。

“`javascript

{

xtype: ‘filefield’,

name: ‘file’,

fieldLabel: ‘选择文件’,

labelWidth: 60,

msgTarget: ‘side’,

allowBlank: false,

buttonConfig: {

text: ‘上传’,

cls: ‘upload-button’

},

listeners: {

change: function (field, value) {

var form = field.up(‘form’).getForm();

if (form.isValid()) {

form.submit({

url: ‘upload.php’,

wtMsg: ‘上传中…’,

success: function (form, action) {

Ext.Msg.alert(‘成功’, action.result.message);

},

flure: function (form, action) {

Ext.Msg.alert(‘失败’, action.result.message);

}

});

}

}

}

}

“`

这个代码会在上传按钮被点击时触发一个change事件。事件处理程序会获取到上传按钮所在的表单，并且会检查表单是否有效。如果有效，就会使用Ext的form.submit()方法来将文件上传到服务器。

form.submit()方法需要传递一个对象参数，这个对象包含了上传的参数和一些方式。我们需要指定上传脚本的地址，同时也需要指定一个等待消息和成功和失败的回调函数。这两个回调函数用于处理文件上传成功或者失败的情况。

到此为止，我们就成功地使用了Ext来实现文件上传至服务器的功能。上述代码可以自由地调整，以适应不同的需求。如果你正在寻找一个功能强大、易于使用的文件上传解决方案，那么Ext可能是你需要的答案。