html 多图片上传功能

因为涉及到业务部分，前端html代码需要支持上传图片，同时获取上传图片后组装成json地址，将地址存储到mysql中，其中数据库存储的图片地址采用json格式：

最终实现的效果如:

[{"path": "http://192.168.2.150:8089/wisdom/81ecdaf8-e1d9-4f33-b7ee-39888a2d860f.png"}, {"path": "http://192.168.2.150:8089/wisdom/a0f15d75-922d-42ba-affa-f9603c6fdd00.png"}]

下面功能可以实现一个页面多个属性上传多个图片，记录各自值，最终返回给Controller进行业务处理

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg"><div class="wrapper wrapper-content "><div class="row"><div class="col-sm-12"><div class="ibox float-e-margins"><div class="ibox-content"><form class="form-horizontal m-t" id="signupForm"><!--<div class="form-group">    --><!--<label class="col-sm-3 control-label">保单人id：</label>--><!--<div class="col-sm-8">--><!--<input id="userId" name="userId" class="form-control" type="text">--><!--</div>--><!--</div>--><div class="form-group">   <label class="col-sm-3 control-label">所属作业公司：</label><div class="col-sm-8"><input id="companyId" name="companyId" class="form-control" type="text"></div></div><div class="form-group">   <label class="col-sm-3 control-label">行驶证编号：</label><div class="col-sm-8"><input id="drivingLicense" name="drivingLicense" class="form-control" type="text"></div></div><div class="form-group"><label class="col-sm-3 control-label">行驶证图片：</label><div class="col-sm-8"><input type="hidden" id="objName" name="objName" value=""><input type="hidden" id="objId" name="objId" value="-1"><input type="hidden" id="drivingLicensePictureStr" name="drivingLicensePictureStr" value=""><div class="form-group"><div id="uploader-demo"><!--用来存放item--><div id="thelist" class="uploader-list"></div><div class="col-sm-8"><div id="filePicker">选择图片</div><button id="ctlBtn" style="display: none"class="btn btn-default">开始上传</button></div></div></div></div></div><div class="form-group"><label class="col-sm-3 control-label">购置编号：</label><div class="col-sm-8"><input id="purchase" name="purchase" class="form-control" type="text"></div></div><div class="form-group"><label class="col-sm-3 control-label">登记证书：</label><div class="col-sm-8"><input type="hidden" id="objNamecert" name="objName" value=""><input type="hidden" id="objIdcert" name="objId" value="-1"><input type="hidden" id="certificationPictureStr" name="certificationPictureStr" value=""><div class="form-group"><div id="uploader-demo-cert"><!--用来存放item--><div id="thelistcert" class="uploader-list"></div><div class="col-sm-8"><div id="filePickercert">选择图片</div><button id="ctlBtncert" style="display: none"class="btn btn-default">开始上传</button></div></div></div></div></div><div class="form-group"><label class="col-sm-3 control-label">维保：</label><div class="col-sm-8"><input id="maintenance" name="maintenance" class="form-control" type="text"></div></div><div class="form-group"><label class="col-sm-3 control-label">使用范围：</label><div class="col-sm-8"><input id="useRange" name="useRange" class="form-control" type="text"></div></div><div class="form-group"><label class="col-sm-3 control-label">保险单号：</label><div class="col-sm-8"><input id="insurance" name="insurance" class="form-control" type="text"></div></div><div class="form-group"><label class="col-sm-3 control-label">保险单图片：</label><div class="col-sm-8"><input type="hidden" id="objNameinsurance" name="objName" value=""><input type="hidden" id="objIdinsurance" name="objId" value="-1"><input type="hidden" id="insurancePictureStr" name="insurancePictureStr" value=""><div class="form-group"><div id="uploader-demo-insurance"><!--用来存放item--><div id="thelistinsurance" class="uploader-list"></div><div class="col-sm-8"><div id="filePickerinsurance">选择图片</div><button id="ctlBtninsurance" style="display: none"class="btn btn-default">开始上传</button></div></div></div></div></div><div class="form-group"><label class="col-sm-3 control-label">车辆相片：</label><div class="col-sm-8"><input type="hidden" id="objNamevehicle" name="objName" value=""><input type="hidden" id="objIdvehicle" name="objId" value="-1"><input type="hidden" id="vehiclePictureStr" name="vehiclePictureStr" value=""><div class="form-group"><div id="uploader-demo-vehicle"><!--用来存放item--><div id="thelistvehicle" class="uploader-list"></div><div class="col-sm-8"><div id="filePickervehicle">选择图片</div><button id="ctlBtnvehicle" style="display: none"class="btn btn-default">开始上传</button></div></div></div></div></div><div class="form-group"><div class="col-sm-8 col-sm-offset-3"><button type="submit" class="btn btn-primary">提交</button></div></div></form></div></div></div></div></div><div th:include="include::footer"></div><script type="text/javascript" src="/js/layui/layui.js"></script><script type="text/javascript" src="/js/appjs/exsun/insuranceManagement/add.js"></script><script>function Picloader(option){if(!option){console.log('the function:Picloader require a parameter')}else{var $list = option.fileList? $(option.fileList) : $('#thelist');var $btn = option.btn ? $(option.btn) : $("#ctlBtn");var thumbnailWidth = option.thumbnailWidth ? option.thumbnailWidth : 100;var thumbnailHeight = option.thumbnailHeight ? option.thumbnailHeight : 100;var httpPathList = "[";var uploader = WebUploader.create({// 选完文件后，是否自动上传。auto: true,swf:'/js/plugins/webupload/Uploader.swf',server:'/exsun/insuranceManagement/upload',pick: option.pick ? option.pick : '#filePicker',accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},thumb: {type: 'image/jpg,jpeg,png'},method:'POST',fileNumLimit: 5, //限制上传个数fileSingleSizeLimit: 2048000 //限制单个上传图片的大小})uploader.on( 'fileQueued', function( file ) {var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +'<img>' +'<div class="info">' + file.name + '</div>' +'</div>'),$img = $li.find('img');// $list为容器jQuery实例$list.append( $li );uploader.makeThumb( file, function( error, src ) {   //webuploader方法if ( error ) {$img.replaceWith('<span>不能预览</span>');return;}$img.attr( 'src', src );}, thumbnailWidth, thumbnailHeight );});// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress span');// 避免重复创建if ( !$percent.length ) {$percent = $('<p class="progress"><span></span></p>').appendTo( $li ).find('span');}$percent.css( 'width', percentage * 100 + '%' );});// 文件上传成功，给item添加成功class, 用样式标记上传成功。uploader.on( 'uploadSuccess', function(file,res) {//debugger;httpPathList = httpPathList + "{\"path\": " + res.data + " },";//还有最后一个尾巴放到java后台处理，这里不知道具体上传了多少个图片console.log(httpPathList);$(option.srcContainer ? option.srcContainer : "#drivingLicensePictureStr").val(httpPathList)$( '#'+file.id ).addClass('upload-state-done');});// 文件上传失败，显示上传出错。uploader.on( 'uploadError', function( file ) {var $li = $( '#'+file.id ),$error = $li.find('div.error');// 避免重复创建if ( !$error.length ) {$error = $('<div class="error"></div>').appendTo( $li );}$error.text('上传失败');});// 完成上传完了，成功或者失败，先删除进度条。uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').remove();});return uploader;}}$(function(){var drivingLicensePicloader = Picloader({fileList:'#thelist',btn:'#ctlBtn',pick:'#filePicker',srcContainer:'#drivingLicensePictureStr'});var certificationPicloader = Picloader({fileList:'#thelistcert',btn:'#ctlBtncert',pick:'#filePickercert',srcContainer:'#certificationPictureStr'});var insurancePicloader = Picloader({fileList:'#thelistinsurance',btn:'#ctlBtninsurance',pick:'#filePickerinsurance',srcContainer:'#insurancePictureStr'});var vehiclePicloader = Picloader({fileList:'#thelistvehicle',btn:'#ctlBtnvehicle',pick:'#filePickervehicle',srcContainer:'#vehiclePictureStr'});});</script>
</body>
</html>

html 多图片上传功能相关推荐

ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
关于微信内置浏览器，打开图片上传功能，调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
（转）淘淘商城系列——实现图片上传功能
http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项 ...
Smiditor实现图片上传功能
Simditor 是 Tower 开源的一个基于浏览器所见即所得的文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验兼容的主 ...
PHP实现图片上传功能
PHP实现图片上传功能: 第一个页: picupload.php 代码如下: <form action="picop.php" method="post" ...
ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
Vue 图片上传功能
Vue 图片上传功能 Vue 图片上传功能,自定义上传限制上传类型 & 多选: ① accept 属性只能与配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性 ...
纯前端实现图片上传功能
纯前端实现图片上传功能,告别后端formData上传使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能了解了upload的基本属性之后我们要开始上硬菜了使用ElementU ...
织梦dedecms广告管理增加广告图片上传功能
织梦的广告位管理是一个不错的插件内部插件,但是dedecms的广告管理功能稍微有点次,不能直接上传图片生成图片链接本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自 ...
Java图片上传功能
文章目录实现步骤核心API 详情代码在使用图片上传功能时,本文章采用表单提交的方法来上传,所以在表单当中需要加上参数enctype="multipart/form-data" ...

html 多图片上传功能

html 多图片上传功能相关推荐

最新文章

热门文章