ExtJS4——图片上传

最新推荐文章于 2021-08-05 14:02:54 发布

木然绽放

最新推荐文章于 2021-08-05 14:02:54 发布

阅读量769

点赞数

分类专栏： ExtJS4

本文链接：https://blog.csdn.net/u013127751/article/details/65441856

版权

ExtJS4 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这里需要php文件进行处理，将上传的图片保存到服务器上。相应的图片保存路径，php文件路径需要对应修改。

index.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

     var imagebox = new Ext.Component({
                autoEl: {//一个标签名或者 DomHelper 描述，用来创建 Element ，它将封装当前组件。
                    style: 'width:200px;height:200px;margin:0px auto;border:1px solid #ccc; text-align:center;padding:5px;margin-bottom:10px',
                    tag: 'div',
                    id: 'imageshow',
                    html: '暂无图片'
                }
            });
    var file = new Ext.form.TextField({
        name:'imgFile',
        fieldLabel:'文件上传',
        inputType:'file',//可取值类型radio,text,password,file
        allowBlank:false,
        blankText:'请浏览图片'
    });
    var btnsubmitclick = function () {
                if (form.getForm().isValid()) {
                        form.getForm().submit({
                            url: 'php/Upload.php',
                            waitMsg:'正在上传图片',
                           // method:'POST',
                            params: {
                                ACTION: 'img',
                                imgFile: form.getForm()
                            },
                            success: function(form, action) {
                                var result = action.result,data=result.data;
                                var path = data['path'];
                                var img  = '<img style="width:190px;height:190px;padding:0px;" src="' + path + '"/>';
                               imagebox.update(img,true);
                                Ext.MessageBox.alert('提示',result.msg);
                            },
                            failure: function(form,action) {
                               // var response = Ext.decode( request.responseText );
                                //do nothing
                                 Ext.MessageBox.alert('提示',action.result.msg);
                            }
                        });
                }
            }
    var btnresetclick = function(){
        form.getForm().reset();
    }
    var form = new Ext.form.FormPanel({
        frame:true,
        fileUpload:true,
        title:'表单标题',
        style:'margin:10px',
        items:[imagebox,file],
        buttons:[{
            text:'保存',
            handler:btnsubmitclick
        },{
            text:'重置',
            handler:btnresetclick
        }]
    });
    var win = new Ext.Window({
        title:'窗口',
        width:476,
        height:374,
        resizable:true,
        modal:true,
        closable:true,
        maximizable:true,
        minimizable:true,
        buttonAlign:'center',
        items:form
    });
    win.show();
  });
</script>
</body>
</html>

Upload.php

<?php
$action = $_FILES['imgFile'];
if ($_FILES['imgFile']["error"] > 0) {
    $error = $_FILES['imgFile']["error"];
    $return_data = array(
        'success' => false,
        'msg' => $error
    );
} else {
    $file_name = $_FILES['imgFile']['name'];
    $file_type = $_FILES['imgFile']['type'];
    $file_tmpname = $_FILES["imgFile"]["tmp_name"];
    $file_size = round($_FILES['imgFile']['size'] / 1024, 2) . "  KB"; // round() 函数对浮点数进行四舍五入。
    
    if (($file_type == 'image/gif') || ($file_type == 'image/jpg') || ($file_type === 'image/jpeg')) {
        if (file_exists("upload/" . $file_name)) {
            $return_data = array(
                'success' => false,
                'msg' => 'The picture is already exist!'
            );
        } else {
            move_uploaded_file($file_tmpname, 'upload/' . $file_name);
            $return_data = array(
                'success' => true,
                'data' => array(
                    'name' => $file_name,
                    'size' => $file_size,
                    'path' => "php/upload/" . $file_name,
                    'type' => $file_type
                ),
                'msg' => 'The picture Upload success!'
            );
        }
    }
}

echo json_encode($return_data);
?>

效果图：

木然绽放

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4——图片上传

这里需要php文件进行处理，将上传的图片保存到服务器上。相应的图片保存路径，php文件路径需要对应修改。index.php Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var
复制链接

扫一扫