12.19工作总结（文件上传）

最新推荐文章于 2021-06-22 10:30:56 发布
最新推荐文章于 2021-06-22 10:30:56 发布
阅读量143 收藏
点赞数
分类专栏： 工作总结 Javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mjx715813/article/details/103609305
版权

1. 后台代码

  	@RequestMapping(value="/upload",method = RequestMethod.POST)
  	public void create(HttpServletRequest request,HttpServletResponse response,MultipartFile file,
  			@RequestParam HashMap<String,Object> map) throws UnsupportedEncodingException{
  	     String token = request.getHeader("token");
		 SysUserCache suc = (SysUserCache)redisUtil.get(token);
  	     HashMap<String,Object> map2 = new HashMap<String,Object>();
  	     map2.put("scrid", String.valueOf(suc.getUserid()));
  		 String filename = "";
  			//如果文件不为空，写入上传路径
  			if(!file.isEmpty()) {
  				// 上传文件名
  				filename = file.getOriginalFilename();
  	            // 新文件名
  	            String newFileName = UUID.randomUUID().toString() + "." + filename.substring(filename.lastIndexOf(".") + 1);
				//根据文件名进行获取文件对象
				CommonsMultipartFile mf = (CommonsMultipartFile) file;
				String suffix = mf.getOriginalFilename().substring(mf.getOriginalFilename().lastIndexOf("."));
				String fullPath="";
				try {
					//将文件对象转换为字节
					byte[] fileBytes = mf.getBytes();
					//创建jesy服务器，进行跨服务器上传
					Client client = Client.create();
					//绝对路径
					fullPath += FileUtil2.yxxxPicture+newFileName+suffix;
					WebResource wr = client.resource(fullPath);
					//上传
					wr.put(fileBytes);
				} catch (Exception e) {
					e.printStackTrace();
				}

  				map2.put("fjwjm",filename);
				map2.put("bclj",fullPath);
				map2.put("lb",map.get("lb"));
				//类别：0住宿环境；1食堂饭菜；2图书馆藏；3实验室；4院校环境；5院校操场；6设施设备；
				map2.put("fjm",newFileName);
  				map2.put("wlid",map.get("wlid"));
  				int flag = service.upload(map2);
  				StockJSON out = new StockJSON(request, response);
  		        out.generateJSONStr(flag);
  			}
  	}

2. 前端代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>后台管理中心</title>
    <link rel="stylesheet" href="../../../../nassets/css/pintuer.css">
    <link rel="stylesheet" href="../../../../nassets/css/admin.css">
    <link rel="stylesheet" href="../../../../../nassets/css/tablelist.css">
    <link rel="stylesheet" href="../../../../nassets/js/page/page.css">
    <link rel="stylesheet" href="list.css">
    <script src="../../../../nassets/js/jquery-2.0.3.min.js"></script>
    <script src="../../../../nassets/js/dict/common_dict.js"></script>
    <script src="../../../../nassets/js/common.js"></script>
    <script src="../../../../nassets/js/common_form.js"></script>
    <script src="../../../../nassets/js/page/jquery-1.8.3.min.js"></script>
    <script src="../../../../nassets/js/page/page.js"></script>
    <script src="../../../../nassets/js/jquery.form.js"></script>
    <script src="../../../../nassets/js/layer-v2.1/layer/layer.js"></script>
    <script src="../../../../nassets/js/auth.js"></script>
    <script src="../../../../nassets/js/file_common.js"></script>
    <script src="../../../../nassets/js/enlargeImg.js"></script>
    <script src="list.js"></script>
</head>
<body>
<div class="panel1 html-container">
    <div class="panel-content-container">
        <form class="form-x" id="yxxxpic">
            <input type="hidden" id="wlid" name="wlid" />
            <input type="hidden" id="lb" name="lb" />

            <div class="btn-container">
                <a class="button button-little bg-green"  href="javascript:;" onclick="uploadFile();" id="biaoti">
                    <span class="icon-plus-square-o"></span>&nbsp;上传图片&nbsp;
                </a> &nbsp;
                <a class="button button-little bg-green"  href="javascript:;" onclick="back();">
                    <span class="icon-plus-square-o"></span>&nbsp;返回
                </a> &nbsp;
            </div>
            <div>
           <span id="hjtp" style='height:200px;'>

           </span>


            </div>
        </form>
    </div>
</div>
<form id="fom" style="display:none;"
      method="post" enctype="multipart/form-data"
      action="/public/yxxx/pic/upload">
    <input type="file" id="file" name="file" accept="image/*" onchange="ajaxSubmitFileForm();"/>
    <input type="hidden" id="wlid2" name="wlid" />
    <input type="hidden" id="lb2" name="lb" />

    <div class="field">
        <button class="button bg-main icon-check-square-o" type="submit" id="submit" onclick="loading()" >
        </button>
    </div>
</form>
</body>
</html>

$(function(){
    var YXID = getQueryString("YXID");
    $("#wlid").val(YXID);
    $("#wlid2").val(YXID);
    var lb = getQueryString("lb");
    $("#lb").val(lb);
    $("#lb2").val(lb);
    loadImg(MSysPath+"/public/yxxx/pic/getlist?lb="+lb,"yxxxpic");
    var map = {
        "0":"<span class=\"icon-plus-square-o\"></span>&nbsp;上传住宿环境图片&nbsp;",
        "1":"<span class=\"icon-plus-square-o\"></span>&nbsp;上传食堂饭菜图片&nbsp;",
        "2":"<span class=\"icon-plus-square-o\"></span>&nbsp;上传图书馆藏图片&nbsp;",
        "3":"<span class=\"icon-plus-square-o\"></span>&nbsp;上传实验室图片&nbsp;",
        "4":"<span class=\"icon-plus-square-o\"></span>&nbsp;上传院校环境图片&nbsp;",
        "5":"<span class=\"icon-plus-square-o\"></span>&nbsp;上传院校操场图片&nbsp;",
        "6":"<span class=\"icon-plus-square-o\"></span>&nbsp;上传设施设备图片&nbsp;"};
    document.getElementById("biaoti").innerHTML = map[lb];

});

function loadImg(url,formid) {
    var map = {"0":"住宿环境","1":"食堂饭菜","2":"图书馆藏","3":"实验室","4":"院校环境","5":"院校操场","6":"设施设备"}
    var options = {
        type : "post",
        url  : url ,
        dataType: "json",
        success: function(result) {
            $("#familyphoto").empty();
            //回调函数
            if(result.code=="0"){
                var list = result.data;
                var htm="";
                for (var index in list){
                    var obj=list[index];
                    htm+="<span style='display:inline-block;margin-left:5px;'><img style='width: 200px;height: 200px;margin-top:5px;display: inline-block' id='familyimg' src='"+obj.BCLJ+"' onclick='scalingPic(\""+obj.BCLJ+"\")' />" +
                        "<br/>"+map[obj.LB]+"<span style='margin-left:80px;margin-top:6px;' class='button button-little bg-red' onclick='del(\""+obj.FJID+"\");'>删除</span></span>"
                }
                $("#hjtp").html(htm);
            }else{
                parent.parent.parent.layer.alert(result.message);
            }
        }
    }
    $("#"+formid).ajaxSubmit(options);
}

function uploadFile(){
    var lb = getQueryString("lb");
    $("#lb2").val(lb);
    $("#file").click();
}
//文件上传成功回调函数
function callback() {
    var lb = getQueryString("lb");
    $("#lb").val(lb);
    layer.close(load);
    parent.parent.parent.layer.msg("上传成功！",{icon:1});
    loadImg(MSysPath+"/public/yxxx/pic/getlist?lb="+lb,"yxxxpic");
}


//返回
function back(){
    parent.location.href=MSysPath+"public/yxxx/sy/list.html";
}
//删除
function del(id){
    var lb = getQueryString("lb");
    $("#lb").val(lb);
    parent.parent.parent.layer.confirm("确认删除吗？", {btn: ['确定', '取消'], title: "删除提示"}, function () {
        $.ajax({
            type : "post",
            url : MSysPath+"/public/yxxx/pic/deletePic?fjid="+id,
            success : function(result) {
                if(result.code == "0"){
                    if(result.data>0){
                        parent.parent.parent.layer.alert("删除成功！",{icon:1});
                        loadImg(MSysPath+"/public/yxxx/pic/getlist?lb="+lb,"yxxxpic");
                    }else{
                        parent.parent.parent.layer.alert("删除失败！",{icon:2})
                    }
                }else{
                    parent.parent.parent.layer.alert(result.message,{icon:2})
                }
            }
        });
    });
}

var load =null
function loading(){
    var load = layer.load();
}
mjx715813
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
thinkphp5.x上传文件图片接口
向宇
01-29 767
废话不多说,直接上代码 public function uploadImg() { //获取文件对象 $file = $this->request->file('file'); //验证并上传 $info = $file->validate(['size'=>'5242880','ext'=>'jpg,gif,png']) ->move('static/upload/admin'); //判断是否成功 if(
node-v12.19.0-x64.msi
09-06
总结，"node-v12.19.0-x64.msi"是Node.js v12.19.0的64位Windows安装包，具备高效、稳定的特性，适合开发者在64位Windows系统上构建和运行JavaScript应用。了解其特点和安装流程，有助于我们更好地利用这一强大的...
TP5 上传文件
weixin_30826761的博客
09-28 274
直接贴上一个完整的代码 /** * 图片上传方法 * @return [type] [description] *//** * 1 获取到文件 * 2 验证文件的形状是不是符合上传的规则 * 3 if（true）-> 将他储存到相应的位置 * 4 if(false) -> 返回错误信息 * 5 检查是否储存到了相应位置 * 6 if(false) -> 提示...
AJAX异步上传图片(TP5)
叶落无痕的博客
10-10 1559
php代码：   /**      * 上传      */     public function upload_photo(){         $file = $this-&gt;request-&gt;file('file');         $uid = session('ydyl_weixin_user.id');         // if(empty($uid)){     ...
ThinkPHP5.0中Request请求对象的使用和常用的操作
php阿宝的博客
07-28 2968
request的使用 第一种方法 在控制器头部添加request引用 然后在方法里调用 ‘instance’类 然后在调用方法： public function index($name='name') { $request = Request::instance(); echo '请求方法：'.$request->method()...
tp请求和响应
weixin_30622107的博客
07-27 268
一、请求参数 use think\Request; 1、获取方法如下： 　　http://w.tp.com/index/index/index/user/AAA $this->request->param(); 和 input();//同样的功能，输出接收的参数 $this->request->param('user'); 和 input('user'...
Alpha Controls 12.19
11-26
AlphaControls是一个标准的皮肤控件集合，它具有很多新的属性，可以添加到普通的控件中以增强程序界面效果，同时还能添加一些行为到普通的控件中，并使用了一些新技术。AlphaControls是一个易于使用且很强大的工具，...
最新版linux node-v12.19.0-linux-x64.tar.gz
10-09
3. 移动文件：将解压后的文件夹移动到系统路径中的可执行文件目录，如 `/usr/local`，通常使用`sudo mv node-v12.19.0-linux-x64 /usr/local/node`。 4. 链接：创建符号链接，以便全局使用Node.js和npm（Node.js的包...
最新版windows node-v12.19.0-x64.msi
10-09
最新版windows node-v12.19.0-x64.msi
node-v12.19.0-x64.zip
10-27
标题中的"node-v12.19.0-x64.zip"指的是Node.js的一个特定版本，12.19.0，针对64位操作系统（x64）的压缩包文件。Node.js是一款开放源代码、跨平台的JavaScript运行环境，它允许开发者在服务器端执行JavaScript代码...
tcpdf html转成pdf,ThinkPHP5使用TCPDF将html转换为pdf
weixin_33585889的博客
06-19 705
代码 class Index extends Controller{public function index(){if($this->request->isPost()){$param=$this->request->param();$file=$this->request->file();$imgPath=$this->saveImg($file);$...
plupload分片上传php,Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
weixin_28751115的博客
03-09 271
本文实例讲述了Thinkphp5+plupload实现支持实时预览的图片上传功能。分享给大家供大家参考，具体如下：今天和大家分享一个国外的图片上传插件，这个插件支持分片上传大文件。其中著名的七牛云平台的jssdk就使用了puupload插件，可见这个插件还是相当牛叉的。这个插件不仅仅支持图片上传，还支持大多数文件的上传，例如视频文件，音频文件，word文件等等，而且大文件都采用分片上传的机制。Pl...
记录ThinkPhp,tp5获取get,post等方法
大话程序员
06-22 3810
use think\Request; class Name { $request = Request::instance(); $method = $request->method();//获取上传方式 $request->param();//获取所有参数，最全 $get = $request->get();获取get上传的内容 $post = $request->post();获取post上传的内容 $request.
用js和tp5怎么做图片上传
Jeuneke的博客
04-01 516
这篇博客已经想写很久了，由于时间问题，一直放着，没动笔。 一、我们先来讲讲上传单张图片并预览的问题。 我们先看下效果图，再来讲解。 上面的图是一张默认的头像图片和input file文本框重合的效果图。 我们来看下html代码 <img src="__STATIC__/uploads/moren/moren.jpg" style="height: 100px;w...
.net core 上传大文件视频 异常 this.Request.Form.Files Request body too large.
wqs15192095633的专栏
10-13 2143
原因是 https://docs.microsoft.com/zh-cn/aspnet/core/mvc/models/file-uploads?view=aspnetcore-3.0 默认是 30000000字节， 在 Program 的 webBuilder.UseStartup() 添加 options.Limits.MaxRequestBodySize = null; public class Program { public static void Main(string[] args)
URL重写
weixin_30700099的博客
09-15 148
apache 重写： ,htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ...
【问题记录】tp5文件上传$_FILES有值request中file却为空
AprilBlank的博客
07-11 9579
前言 在整理一套php代码的时候，需要添加文件上传功能，虽说我对php不算怎么熟悉，但是我想着一个简单的文件上传其实就form表单的提交能有多麻烦，谁知道遇到的问题颇为诡异，不过好在最后那么简单的问题解决了。 问题 在页面做了一个上传控件，用到了layui的文件上传，之后在Controller接收文件时发现，获取的文件为空。 html代码如下： <div cla...
ssh: connect to host 10.32.12.19 port 22: Connection refused
最新发布
01-09
根据提供的引用内容，出现"ssh: connect to host 10.32.12.19 port 22: Connection refused"错误可能是由于以下原因导致的： 1. 网络连接问题：请确保你的网络连接正常，并且能够访问目标主机。你可以尝试使用ping...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值