使用extjs4.2 实现图片的上传并预览
【注意:测试发现在ie上不能显示页面,效果是在谷歌浏览器测试】
【上传博客之后我发现上传功能无效了,sorry】
参考博客:http://blog.csdn.net/zljjava/article/details/25419631
使用extjs4.2 进行图片上传操作,在选择图片的同时我们需要加载预览图片,晚上这方面的资料不少,但是这些代码真正使用的时候发现不适合extjs4.2
网上基本上是通过获取到上传文件的控件 使用其dom属性但是在extjs4.2中不能直接调用控件的该属性。
在获取我们选择上传的文件时我们使用上传控件的inputEl属性在调用dom
而我们需要显示图片的控件我们使用其src来进行加载。
效果图:
上传文件和显示图片的js代码:
var formpanel= Ext.create("Ext.form.FormPanel", { title: 'ExtJS 无刷新文件上传(<font color="red">文件最大</font>)', width: '95%', height: '95%', x:5, y: 5, layout: "form", bodyPadding: "5", defaultType: "textfield", fieldDefaults: { labelAlign: "left", labelWidth: 55 }, items: [ { id: 'File', name: 'File', inputType: "file", fieldLabel: '上传图片', xtype: 'textfield', anchor: '40%', allowBlank: false, listeners: {//监听事件 'render': function () {//读取 console.log('读取照片'); var path = Ext.getCmp('File').getValue() var url = 'file:///' + path; console.log(url);//浏览器安全保护下的虚拟路径 Ext.getCmp('File').on('change', function (field, newValue, oldValue) {//上传图片的控件对象,刚刚选择的图片仿真路径,上次选择的图片仿真路径 console.log(newValue); console.log('浏览器类型:是ie?' + Ext.isIE); var show = Ext.getCmp('browseImage'); console.log(show); if (Ext.isIE) { } else {//获取选择文件的路径信息? 将路径绑定到显示图片的box内加载 var obj = Ext.getCmp('File').inputEl.dom.files; console.log(len); var len = obj.length;//选文件的数量 if (len < 1) { console.log('没有选择图片'); return; } var imgurl = window.URL.createObjectURL(obj[0]); console.log(imgurl) Ext.getCmp('browseImage').getEl().dom.src = imgurl; } }, this);//这是选择文件 } } }, { xtype: 'box', //或者xtype: 'component', width: '100%', //图片宽度 height: 200, //图片高度 fieldLabel: "预览图片", id: 'browseImage', autoEl: { tag: 'img', //指定为img标签 //src: 'ftp://127.0.0.1/UserFile/UserData/20160320/hotel_hotel_20160820220330.jpg', //Ext.BLANK_IMAGE_URL,//指定url路径 src: Ext.BLANK_IMAGE_URL, id: 'imageBrowse' } } ], buttons: [ { text: "上传", handler: function () { var formCmp = this.up("form"); if (!formCmp.isValid()) return; //验证未通过,返回 var photoName = Ext.getCmp('File').getValue(); console.log(photoName); formCmp.submit({ url: "../User/Upload", method: "POST", waitMsg: '正在上传...', params: { photoName: photoName }, success: function (form, action,ret) { console.log(form); console.log(action); console.log(ret); Ext.MessageBox.alert("提示", action.result.message); }, failure: function (form, action, ret) { console.log('submit认为请求失败,可是操作成功了'); console.log(form); console.log(action); console.log(ret); switch (action.failureType) { case Ext.form.action.Action.CLIENT_INVALID: Ext.Msg.alert('失败1', 'Form fields may not be submitted with invalid values'); break; case Ext.form.action.Action.CONNECT_FAILURE: Ext.Msg.alert('失败2', 'Ajax communication failed'); break; case Ext.form.action.Action.SERVER_INVALID: Ext.Msg.alert('失败3', action.result.message); } } }); } }, { text: '关闭', handler: function () { //win.hide(); } } ] }); //窗体 var win = new Ext.Window({ title: '上传文件窗口', width: 476, height: 374, resizable: false, modal: false, closable: false, closeAction: 'hide', custormServiceAimObjectId: '',//这是给哪个对象进行文件上传操作(如哪家酒店ID) custormFileType: ''//自定义属性,指向文件的类型 }); //html页面种通过调用这个函数显示上传窗体 function btnUpload_click(maxFileSize, winTitle, fileCategory, custormServiceAimObjectId) {//其他窗体需要进行上传文件只需要调用这个函数就可以 console.log('调用js脚本的函数进行窗体'); win.setTitle(winTitle); win.custormFileType = fileCategory; console.log(custormServiceAimObjectId); win.custormServiceAimObjectId = custormServiceAimObjectId; win.items.removeAll();//移除之前全部的items var limitFileMB = maxFileSize == null ? '10MB' : maxFileSize; formpanel.setTitle('ExtJS 无刷新文件上传(<font color="red">文件最大' + limitFileMB + '</font>)'); win.items.add(formpanel); win.doLayout(); win.show(); }
//这里面的语句就是我们上传和显示使用的js脚本