照片上传功能的实现

最新推荐文章于 2022-05-06 22:49:34 发布

wzjnbl111

最新推荐文章于 2022-05-06 22:49:34 发布

阅读量467

点赞数

分类专栏：编程语言

本文链接：https://blog.csdn.net/wzjnbl111/article/details/46987869

版权

这篇博客详细介绍了如何实现照片上传功能，包括前端ExtJS的组件设置、后端接口编写以及数据库交互。主要涉及文件上传字段配置、表单验证、图片预览和上传反馈等步骤。

摘要由CSDN通过智能技术生成

1. 前端以ExtJs的形式显示。

{xtype: ' form ', id: ' mainPic ' , hidden: false, border: false , layout : ' hbox ', items: [

{xtype: ' label ' , text: ' 主推图片:' ,style: ' color: #666666 '},

{xtype: ' label ' , width: 50 },

{xtype: ' hidden ',name :' path ', value:''},

{
xtype: 'fileuploadfield',
width: 495,
emptyText: '建议尺寸：970*360 像素',
buttonCfg: {
text: '浏览',
iconCls: 'icon-upload'
},

regex: img_reg,
name: 'image',
regexText: '请上传图片格式的文件',

listeners: {

'change': function () {

var uploadForm = this.up('form').getForm();
var form = this.up('form');

if (uploadForm.isValid()) {

uploadForm.submit({

url: ctx+'/photo/uploadPhoto',

method: 'post',

params:{

appVersion:1

failure: function (form, action) {
var status = Ext.decode(action.response.responseText).status;
var picId = Ext.decode(action.response.responseText).data.photoId;
if(status=="success"){
Ext.getCmp('browseMainImage').setWidth(200)
Ext.getCmp('browseMainImage').setHeight(155)
Ext.getCmp('browseMainImage').getEl().dom.src = ctx+"/photo/getPhoto?photoId=" + picId+"&width=200"+"&height=150";
Ext.getCmp('browseMainImage').photoId= picId;
Ext.getCmp('photoId').setValue(picId);
Ext.Msg.alert('确认', '上传成功');
}else{
Ext.Msg.alert('警告', '上传失败');
}
}

});

}else{

Ext.Msg.alert("","");

}

]},

{xtype: 'form', width:600,border: false, layout: '', items: [

{

xtype: ' image ',

margin:' 5 0 0 100 ',

id: ' browseMainImage ',

photoId : null,