获得的上传是最常用的，不可或缺，记录一下代码，以后复制都能用！

1.前端HTML:

div class=' layui-form-item ' label class=' layui-form-label '修改头像/label div class=' layui-input-inline uploadhead image ' div class=' layui-upload-drag ' id=' head img ' I class='layui-icon'/i p点击上传图片，或将图片拖拽到此处/p/div/div class=' layui-input-inline ' div class=' layui-upload-list ' img class=' layui-upload-img head image ' src=' http :http://t。cn/rczsdq ' id=' demo 1 ' p id=' Democext '/p/div/div 2 .前端js:

脚本类型=' text/JavaScript ' layui。使用([' jquery '，' upload '，' form '，' layer '，' element']，function () { var $=layui .$，元素=layui.element，图层=layui.layer，上传=layui.upload，表单=layui.form//拖拽上传var uploadInst=上传。render({ elem : ' # head img '，url: '/upload/headImg '，size: 500，before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(函数（索引、文件、结果){ $('#demo1 ').attr('src '，结果);//图片链接(base64)})；}，done:函数(res) { //如果上传失败if (res.code 0) { return layer.msg('上传失败');} //上传成功//打印后台传回的地址： 把地址放入一个隐藏的投入中，和表单一起提交到后台，此处略./*控制台。日志数据。src)；*/窗口。父母。uploadhead图像(RES . data。src)；var Democext=$(' # Democext ')；Democext。html(' span style=' color : # 8f 8 f8f；'上传成功！/span’)；}，error: function () { //演示失败状态，并实现重传var Democext=$(' # Democext ')；Democext。html(' span style=' color : # FF5722；'上传失败/span a class=' layui-BTNlayui-BTN-迷你演示-重装'重试/a ')；降级文本查找('。演示-重装').on('click ')，function(){ uploadinst。上传()；});} });元素。init()；});/script3 .页面展示：

4.后台学习笔记一接受：

/** * 个人信息上传* @返回{结果} */@RequestMapping(值='/上传/headImg '，方法={RequestMethod .POST })@ ResponseBodypublic Object head img(@ request param(值='file '，必选=false)多部分文件，HttpServletRequest请求，HttpServletResponse响应)引发异常{ if (SecurityUtils.getSubject().isAuthenticated()==false){ return ' redirect :/后端/log in '；}字符串前缀=' ';字符串dateStr=//保存上传输出流输出=空输入流文件输入=空尝试{ if(file！=null){字符串原始名称=文件。getoriginalfilename()；前缀=原始名称。子字符串(原始名称。的最后一个索引(' . ')) 1);dateStr=format.format(新的date())；字符串文件路径=请求。getservletcontext().getRealPath('/static ')uploadDir dateStr。'前缀；filepath=filepath.replace('\ '，'/')；文件文件=新文件（文件路径);//打印查看上传路径系统。出去。println(文件路径)；if(！files.getParentFile().exists()){ files.getParentFile().mkdirs()；} file.transferTo(文件);} }捕获(例外e){ }最后{尝试{ if(out！=null){ out。close()；} if(fileInput！=null){ FileInput。close()；} } catch(IOException e){ } } MapString，Object map2=new HashMap()；MapString，Object map=new HashMap()；map.put('code '，0)；map.put('msg '，' ')；map.put('data '，map 2)；map2.put('src '，'./././static' uploadDir dateStr '前缀);返回地图；}5.关于表单请求，正常使用获得的表单上传就可以了.这里就不写了，太简单了，我其它博客有写，请去翻阅，嗯，就这样.

以上这篇获得图片上传表单提交的实现的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。