input隐藏域和layui图片上传问题

layui上传图片时需要Button和url,表单也需要button和url,所以很多博客上写需要用js图片src进行一个操作，然后再调用js实现把图片的src给后台，但是这样的js还是很难看懂的，这里我使用input隐藏域优势，将问题隐藏一下。图片上传成功之后将图片的src保存在一个隐藏的input中，在表单提交的时候同时就将src传过去了，并且代码也很轻便简单。

前台：

<div>
<label class="label">图片</label>
<!--//利用隐藏域解决了问题-->
<input type="hidden" name="image" id="image">
<i class="layui-icon layui-icon-add-circle-fine" id="pic" style="color: #6d638f;font-size: 25px;  margin-top:4%;"></i>
<div class="layui-upload-list">
<img class="layui-upload-img" id="picdemo"name="picdemo">
<p id="demo"></p>
</div>

</div>
<div>
<label class="label">二维码</label>
<input type="hidden" name="qr" id="qr">
<i class="layui-icon layui-icon-add-circle-fine" id="qrcode" style="color: #6d638f;font-size: 25px;  margin-top:4%;"></i>
<div class="layui-upload-list">
<img class="layui-upload-img" id="codedemo" name="codedemo">
<p id="demo1"></p>
</div>
</div>

前台js文件

layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({
elem: '#ddl'
,theme: '#4d2eb3'
});
});
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
var uploadInst = upload.render({
elem: '#pic' //绑定元素
,url: '/upload/' //上传接口
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#picdemo').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
document.getElementById('image').value=res.data;

var fileupload = $("#image");
fileupload.attr("value",res.data.src);

console.log(fileupload.attr("value"));
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demo');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
var uploadInst1 = upload.render({
elem: '#qrcode' //绑定元素
,url: '/upload/' //上传接口
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#codedemo').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
document.getElementById('qr').value=res.data;

}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demo1');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst1.upload();
});
}
});
});

</script>

可以看到从后台data.src,该赋给了input(这里上传了两张，之后代码精简）

后台upload ，并返回src

//图片上传
@RequestMapping("/upload")
@ResponseBody
public Object upload(@RequestParam(value = "file",required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response)throws Exception{
String prefix = "";
String datestr = "";
//保存上传
OutputStream out = null;
InputStream fileInput=null;
try{
if(file!=null){
String originalName = file.getOriginalFilename();
prefix=originalName.substring(originalName.lastIndexOf(".")+1);
Date date = new Date();
String uuid = UUID.randomUUID()+"";
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
datestr = simpleDateFormat.format(date);
//上传路径
String filepath = request.getServletContext().getRealPath("/static")+"/image/" + datestr+"/"+uuid+"." + prefix;
filepath = filepath.replace("\\", "/");
File files=new File(filepath);
//打印查看上传路径
System.out.println(filepath);
if(!files.getParentFile().exists()){
files.getParentFile().mkdirs();
}
file.transferTo(files);
//返回json串
Map<String,Object> map2=new HashMap<>();
Map<String,Object> map=new HashMap<>();
map.put("code",0);
map.put("msg","");
map.put("data",filepath);
map2.put("src",filepath);
return map;
}
}catch (Exception e){
}finally{
try {
if(out!=null){
out.close();
}
if(fileInput!=null){
fileInput.close();
}
} catch (IOException e) {
}
}
Map<String,Object> map=new HashMap<>();
map.put("code",1);
map.put("msg","");
return map;
}

map存了data 的src,可以在前台直接获取。js里看到

document.getElementById('image').value=res.data;
document.getElementById('qr').value=res.data;

可以存到input隐藏域，表单一起，表单ajax:

<script>
$(function() {
$("#submit").on('click', function () {
var layer = layui.layer;
var regNumber = /^\d+$/;
var regString = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (document.getElementById('title').value === '') {
layer.msg('题目不得为空！', {icon: 7,time:1500});
return false;
}

if(document.getElementById("title").value.length>16){
layer.msg('题目不得超过16字！', {icon: 7,time:1500});
return false;
}
if (document.getElementById('company').value === '') {
layer.msg('公司名称不得为空！', {icon: 7,time:1500});
return false;
}
if (document.getElementById('website').value === '') {
layer.msg('应聘网址不得为空！', {icon: 7,time:1500});
return false;
}
if (document.getElementById('email').value === '') {
layer.msg('简历投递地址不得为空！', {icon: 7,time:1500});
return false;
}
if(!regString.test(document.getElementById('email').value)){
layer.msg('您输入的邮箱地址格式不正确', {icon: 7,time:1500});
return false;
}
if (document.getElementById('contactline').value === '') {
layer.msg('联系方式不得为空！', {icon: 7,time:1500});
return false;
}
if(regNumber.test(document.getElementById('contactline').value)&&document.getElementById('contactline').value.length!==11){
layer.msg('电话号码需为十一位', {icon: 7,time:1500});
return false;
}
if(!regNumber.test(document.getElementById('contactline').value)&&!regString.test(document.getElementById('contactline').value)){
layer.msg('您输入的邮箱地址格式不对', {icon: 7,time:1500});
return false;
}
if (document.getElementById('keyword').value === '') {

layer.msg('关键词不得为空！', {icon: 7,time:1500});
return false;
}
// var layer = layui.layer;
var loadingIndex = null;
var data = $("#form").serialize();
$.ajax({
type: "post",
url: "/user/publishjob",
data: data,
dataType: "text", //返回数据类型
beforeSend: function () {
loadingIndex =  layer.load(0, {shade: true});
}, success: function(msg){
if(1 == msg){
layer.close(loadingIndex);
layer.alert('您已添加成功', {
skin: 'layui-layer-lan'
,closeBtn: 0
,shift: 3//动画类型
});
document.getElementById("form").reset();

}
else if(0 == msg){
layer.close(loadingIndex);
layer.msg('因未知原因添加未成功，请稍后再试~', {icon: 2,time:1500});
}
document.getElementById("myform").reset();

}

});
});
});
</script>

在后台利用request.getParament("")，就可以拿出来！共勉！