文件上传并且把文件名字保存到数据库(java+js代码)

新手的我在前几天一直在学习上传文件这一块儿,一直不明白没有弄出来,不过好的是在今天终于研究出来了。如果有不足的地方还请大神们多多指点,小弟好纠正,废话不多说直接上代码,代码里面也有注释一看便知。

文件上传java后台代码如下:


/**
      * 文件上传Action;
      * @param mapping
      * @param form
      * @param request
      * @param response
      * @return
     * @throws Exception
      */
     public ActionForward empupload(ActionMapping mapping, ActionForm form,
               HttpServletRequest request,HttpServletResponse response) throws Exception{
          //消息提示
                String message = "";
            request.setCharacterEncoding("utf-8");  
               response.setCharacterEncoding("utf-8");  
                //1、创建一个DiskFileItemFactory工厂  
                DiskFileItemFactory factory = new DiskFileItemFactory();  
                //2、创建一个文件上传解析器  
                ServletFileUpload upload = new ServletFileUpload(factory);  
                //解决上传文件名的中文乱码  
                upload.setHeaderEncoding("UTF-8");   
                factory.setSizeThreshold(1024 * 500);//设置内存的临界值为500K  
                //把文件放到固定的地方;
                String savePath = request.getSession().getServletContext().getRealPath("/outfile");
                File linshi = new File(savePath);//当超过500K的时候,存到一个临时文件夹中  
                factory.setRepository(linshi);  
                upload.setSizeMax(1024 * 1024 * 10);//设置上传的文件总的大小不能超过10M  
                try {  
                    // 1. 得到 FileItem 的集合 items  
                    List<FileItem> /* FileItem */items = upload.parseRequest(request);  
                    // 2. 遍历 items:  
                    for (FileItem item : items) {  
                        
                            //文件名字;
                            String fileName = item.getName();
                            Writer w = response.getWriter();
                            //上传成功后返回文件名字;
                            w.append(fileName);
                            //文件大小;
                            long sizeInBytes = item.getSize();  
                            System.out.println(fileName);  
                            System.out.println(sizeInBytes);  
                            //获取intem中的上传输出流;
                            InputStream in = item.getInputStream();  
                            //创建一个缓冲区;
                            byte[] buffer = new byte[1024];  
                         //判断是否流读完的一个标识;
                            int len = 0;  
                          //判断上传文件的保存目录是否存在
                            if (!linshi.exists() && !linshi.isDirectory()) {
                            System.out.println(savePath+"目录不存在,需要创建");
                            //创建目录
                            linshi.mkdir();
                            }
                            fileName = request.getRealPath("/")+"outfile/"+fileName;//文件最终上传的位置  
                            System.out.println(fileName+"下一步!!!");  
                            //创建一个输出流;
                            OutputStream out = new FileOutputStream(fileName);  
                            //读取文件并且输入到savePath文件里;
                            while ((len = in.read(buffer)) != -1) {  
                                out.write(buffer, 0, len);  
                            }  
                            out.close(); //关闭输出流;
                            in.close();  //关闭输入流;
                          //删除处理文件上传时生成的临时文件
                            item.delete();
                            message = "文件上传成功!";
                            System.out.println(message);
                         
                           // return mapping.findForward("success");
                        }  
          
                } catch (FileUploadException e) {  
                    e.printStackTrace();  
                    message = "文件上传失败!";
                 System.out.println(message);
                }  
            return null;
     }

js要引用:ajaxupload.js    这个可以在网上直接下载即可。

文件上传前台代码html加JS如下:

html:

<form id="form" name="form" method="post">

<div id="sj">
        <label id="wj" style="color:red;margin-left: 10%">上传文件:</labl>
        <input id="filea" type="text" name="image" class="form-control" />
        <button id="file1" type="button" value="上传" οnclick="submi()">上传</button>
        </div>


<div id="butt">
        <button type="button" class="btn btn-success"  id="buttontrue" οnclick="addemp()">确  定</button>
        <button type="button" class="btn btn-danger" id="cole" οnclick="cole()">取  消</button>
        </div>

</form>

js:

 $(document).ready(function(){
         var upload=new AjaxUpload($("#file1"),{
                //调用action;
                action:'empSelect.do?method=empupload',
                //筛选后提交文件;
                autoSubmit:true,
                // 文件上传时调用
                // 您可以通过设置返回false 取消上传
                // @参数1,file为上传文件的文件名
                // @参数2,ext为那个文件(后缀名)
                onSubmit: function (file,ext) {
                     $("#buttontrue").attr("disabled","disabled");//禁止此控件操作
                     $("#cole").attr("disabled","disabled");//禁止此控件操作
                 },
                 //提交文件后调用;
                 onComplete:function(file,response){
                      alert(response);
                      alert(file);
                     this.enable();
                     //获取文本里的值;
                     var file=$("#filea").val();
                     if(file != ""){
                         file =file+","; //可以重复上传
                     }
                     //var data = eval("(" +file, response+ ")");
                     document.getElementById("filea").value=file+response; //上传成功后后台把文件名字返回到前台并且赋给“file”。
                     $("#buttontrue").removeAttr("disabled");
                     $("#cole").removeAttr("disabled");
                     alert("上传成功");
                 },
                 responseType: 'text'
    });

    当然这下面的就是比如上传文件的时候还有其他的字段需要存到数据库里则直接加到上面代码后面即可。

         //提交表单添加至数据库;
         $("#form").submit(function(){
             $(this).ajaxSubmit({
                 beforeSubmit:function(){
                 var name=$("#name").val();
                    var sex=$("#sex").val();
                    var time=$("#time").val();
                 var depa=$("#depa").val();
                 var job=$("#job").val();
                 var id=$("#id").val();
                    var image=$("#file").val();
                 },
                 url:'empSelect.do?method=empadd',
                    type:'post',
                    success:function(data){
                        if(data){
                            alert("添加成功!");
                        }else{
                            alert("添加失败!");
                        }
                    }
             });
         });
    });



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以按照以下步骤将前端使用 element-ui 的上传组件将文件上传后端保存数据库中: 1. 前端页面使用 element-ui 的上传组件进行文件选择和上传操作。确保你已经正确引入了 element-ui 的库文件和样式。 2. 在前端代码中,监听上传组件的 change 事件,获取用户选择的文件。可以使用 `@change` 属性或者 JavaScript 的事件监听函数来实现。 3. 在事件处理函数中,使用 JavaScript 的 FormData 对象创建一个表单数据对象,并将选中的文件添加到表单中。例如: ```javascript let formData = new FormData(); formData.append('file', event.target.files[0]); ``` 4. 使用 axios 或者其他的网络请求库发送 POST 请求到后端的接口。确保你已经正确引入了相应的库文件。 5. 在后端代码中,接收前端发送的请求并处理文件上传操作。具体的实现方式取决于你使用的后端技术栈,这里以 Spring MVC 为例: - 在控制器中定义一个接收文件上传请求的方法,使用 `@RequestMapping` 或者其他的注解标识该方法为处理上传请求的方法。例如: ```java @RequestMapping("/upload") public String handleFileUpload(@RequestParam("file") MultipartFile file) { // 处理文件上传逻辑 // 将文件保存数据库中 return "success"; } ``` - 在方法中,使用 `@RequestParam` 注解获取前端传递的文件,并将其保存数据库中。具体的保存逻辑根据你的业务需求进行实现。 注意:在保存文件到数据库之前,你可能需要先将文件保存到本地或者将文件内容转换为合适的格式,然后再进行数据库的存储操作。 6. 在前端代码中,根据后端返回的处理结果进行相应的提示或者页面跳转。 这样,你就可以实现将前端使用 element-ui 上传的文件通过后端保存数据库中了。当然,具体的实现方式还需要根据你的业务需求和后端技术栈进行适当的调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值