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可能是你需要的答案。
相关问题拓展阅读：
Ext4上传问题！！！老在执行“正在上传照片文件请稍后…“，怎么回事，新手啊，代码如下
method: “post”,
fileUpload: true,
在formPanel配置中加这句看凯轿斗看，上传文件必须用盯磨post方法提交帆桐
您好请问您这个最后是怎么解决的呢，隔一年了，我今天也遇到这个问题,新手入门
extjs 上传文件到服务器的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于extjs 上传文件到服务器,Ext实现文件上传至服务器的技巧和方法,Ext4上传问题！！！老在执行“正在上传照片文件请稍后…“，怎么回事，新手啊，代码如下的信息别忘了在本站进行查找喔。
