ext-4.2.1.883 代碼存在問題（雲存儲，備份，記錄失敗的狀況）：

時間 2020-06-29

標籤 ext 4.2.1.883 代碼存在問題存儲備份記錄失敗狀況简体版

原文原文鏈接

在使用extjs4.2 進行圖片文件上傳操做時，不能實現選擇照片同時進行照片的預覽，而且在上傳圖片時出現錯誤，沒有進入到後臺javascript

頁面效果：css

錯誤1：在選擇圖片成功時顯示圖片的區域不能更改圖片html

錯誤2：點擊保存時使用form的submit事件操做失敗，進入到js追蹤java

for (i = 0; i < len; ++i) {
el = uploadFields[i].extractFileInput();
formEl.appendChild(el);
uploadEls.push(el);
}bootstrap

代碼來自app

頁面使用到的代碼：dom

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>景點信息（上傳預覽圖片）</title>
    <link href="~/Content/ext-4.2.1.883/resources/css/ext-all.css" rel="stylesheet" />
    <link href="~/Content/ext-4.2.1.883/resources/css/icon.css" rel="stylesheet" />
    <script src="~/Content/ext-4.2.1.883/bootstrap.js"></script>
    <script src="~/Content/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body> 
</body>
</html>
<script type="text/javascript">
    Ext.onReady(function () {
        Ext.QuickTips.init(); 
        //建立文本上傳域
        var sltfile = new Ext.form.TextField({
            name: 'upload',
            id: 'upload',
            fieldLabel: '文件上傳',
            inputType: 'file',
            allowBlank: false,
            blankText: '請瀏覽圖片'
        });
        //表單
        var fileUploadForm = Ext.create("Ext.form.FormPanel", {
             frame: true,
             fileUpload: true,
             id: 'fileUploadForm',
             title:'',
             width: '100%',
             enctype:'multipart/form-data',
             height: '100%',
             url: '../User/Upload',
             style: 'margin:5px', 
             buttonAlign: 'center',
             layout:'form',
             items: [sltfile,
                 {
                     xtype: 'box', //或者xtype: 'component',  
                     width: '100%', //圖片寬度  
                     height: 200, //圖片高度  
                     fieldLabel: "預覽圖片",
                     id: 'browseImage',
                     autoEl: {
                         tag: 'img',    //指定爲img標籤  
                         src: 'ftp://127.0.0.1//UserFile//78470-106.jpg'  ,  //Ext.BLANK_IMAGE_URL,//指定url路徑  
                         id: 'imageBrowse'
                     }
                 }
             ],
             buttons: [{
                 text: '保存',
                 formBind: true,
                 fileInputEl: '../User/Upload',
                 handler:uploadFile
                 }, {
                  text: '重置'
              
             }]
         });
         function uploadFile() {
             console.log('prepare upload file');
             var formcmp = this.up('form');
             console.log(formcmp);
             var valid = fileUploadForm.isValid();//是否存在可上傳的文件
             console.log(!valid);
             if (!valid) {
                 Ext.getCmp('fileUploadForm').setTitle("請選擇要上傳的文件");
                 console.log(Ext.getCmp('fileUploadForm').title);
                 return;
             }
             Ext.getCmp('fileUploadForm').setTitle("");
             var photoName = Ext.getCmp('upload').getValue();
             console.log('文件上傳的虛擬路徑：'+photoName);
             //  Ext.DomHelper.append(Ext.getBody(), formSpec);
             Ext.getCmp('browseImage').src = photoName;
             var files = Ext.get('upload').dom.files;
             console.log(files);
             console.log('執行操做出現於異常----');
             Ext.getCmp('fileUploadForm').getEl().action = '../User/Upload';
             Ext.getCmp('fileUploadForm').getEl().method = "POST";
             fileUploadForm.submit({
                 url: '../User/Upload',
                 method: "POST",
                 timeout: 1000,
                 waitTitle: '提示', 
                 waitMsg: '請稍後，文件上傳中.....',
                 params: {
                     photoName: photoName
                 },
                 success: function (form, action) {
                     console.log("文件上傳成功。");
                     Ext.Msg.alert('Tips', "<font color='green'>" + action.result.msg + "</font>");

                 },
             });
         }   
        //窗體
        var win = new Ext.Window({
            title: '上傳文件窗口',
            width: 476,
            height: 374,  
            resizable: true,
            modal: true,
            closable: true,
            maximizable: true,
            minimizable: true,
            closeAction:'hide',
            items: fileUploadForm
        });
        win.show();
    });
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。