2017-03-13 22:16:35 fanxiangru999 阅读数 10439

最近公司的项目要用到文件上传,然后发现单文件上传还是挺简单,但是多文件就有点麻烦了,废话不会说,多见谅,下面是正文:

首先在网上找到了swfUpload,个人感觉样子不太好看,效果如下:




然后我找到了bootstrap fileupload,先看效果图:



官网demo地址:http://plugins.krajee.com/file-input/demo 

txt、excel支持文件预览,图片可以放大 左右翻看,非常nice!!!!


前段代码在这里:bootstrap fileupload 使用详解():http://blog.csdn.NET/fanxiangru999/article/details/63756730


下面是后台代码

SpringMVC 配置及代码如下:

1、配置SpringMVC文件上传解析器:applicationContext.xml 中增加如下配置:

<!-- 配置SpringMVC文件上传解析器  -->
	<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	<property name="maxUploadSize" value="-1" />
    	<property name="defaultEncoding" value="UTF-8" />
    	<property name="maxInMemorySize" value="40960"></property>
    </bean>

2、controller写法:

@RequestMapping(value = "/upload", produces = "text/html;charset=utf-8")
	@ResponseBody
	public String uploadFlatness(@RequestParam("fileId") MultipartFile file,
			HttpServletRequest request) throws IOException {
		// 1、解析文件数据,并存入车检数据库
		InputStream fileInput = fileInput = file.getInputStream() ;
		String name = file.getOriginalFilename();
		fileInput.close();
		return "上传成功:"+name;
	}
文件多选时,将同步挨个文件进行上传,测试就能看到效果:


SpringMVC+bootsrap 操作已经晚了,很简单吧~


下面介绍两个有用的方法:

1、如果页面中某个值或者内容改变需要调整上传路径,可以借鉴下面:

$("#fileId").fileinput(
				"refresh",
				{
					uploadUrl : basePath
							+ 'ptcms/lkpd/ptcdImport/uploadFlatness/SFC/' + screening
				});

2、上传成功后回调函数:

$(document).on('fileuploaded', function(event, data, previewId, index) {
		if (data.response.status == "error") {
			var d = data.response.data;
			for ( var i = 0; i < d.length; i++) {
				d[i].fileName = data.filenames[index];
				datas.push(d[i]);
			}

			if ((data.filenames.length - 1) == index) {
				mini.alert("检测数据校验不通过,无法导入");
				var grid = mini.get("resultGrid");
				grid.setData(datas);
				datas = new Array();
			}
		} else {
			var grid = mini.get("resultGrid");
			grid.load();
		}
	});


2017-09-07 17:12:54 xingxuexue 阅读数 2521

1.做了一天终于做出来了,在上传成功之后,可以将路径添加到数据库,因为一直在烦恼如何在上传成功之后在将路径添加到数据库,终于弄出来了,太开心了,不得不说bootstrap的强大,之前说ajax不能上传文件,之后想办法,用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条。
后台的代码在之前写过了
这只有前台的代码

记得:在验证的时候,尽量用控制台来验证,有的时候你的代码写对了,但是有可能alert不显示

console.log("aaaa");

1.导入相应的js和样式

<script type="text/javascript" src="jsbootstrap/locales/zh.js"></script>
<script type="text/javascript" src="jsbootstrap/fileinput.min.js" ></script>
<link href="css/css/fileinput.min.css" rel="stylesheet">

2.模态框里加入,千万要记住name的属性和你后台的代码属性有关,还有class需要是file

<input type="file" name="my" class="file" id="aaa"  data-show-upload="true" data-show-caption="true"><br>

3.具体的文件上传的方法
在上传成功之后还有一个ajax的方法,真是太神奇了
有些时候试试才知道,可不可以

  //上传文件
    Initfileinput = function (uploadurl){
        $("#aaa").fileinput({
            //uploadUrl: "../fileinfo/save", // server upload action
            uploadUrl:"http://localhost:8080/GD/UploadAction_execute.action",
            required: true,
            showBrowse: true,
            browseOnZoneClick: true,
            dropZoneEnabled: false,
            allowedFileExtensions: ["jpg", "xlsx"],//只能选择xls,和xlsx格式的文件提交
            //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
            layoutTemplates:{ actionUpload:''},
            /*上传成功之后运行*/
            fileuploaded:$("#aaa").on("fileuploaded", function (event, data, previewId, index) {
                console.log("Upload success");
                var a = document.getElementById('aaa').value;
                console.log(a);
                $.ajax({
                    type:"post",
                    async:false,
                    url:"http://localhost:8080/GD/UploadAction_add.action",
                    data:{
                        "filepath.path" : a
                    },
                    dataType:"json",
                    success:function () {
                        console.log("添加成功");
                    }
                })
            }),
            /*上传出错误处理*/
            fileerror:$('#aaa').on('fileerror', function(event, data, msg) {
                console.log("Upload failed")
            }),
        });
    }
    Initfileinput (); //记得加载,初始化
2019-05-07 14:45:14 qq_35392981 阅读数 199

由于可以上传多个文件,所以在后台获取时需要解析多个文件

一、前台页面文件上传

github开源示例

二、后台java源代码

package com.kp.servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.JSONObject;

import com.wb.util.SysUtil;

public class getUploadImg extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	public void service(HttpServletRequest request, HttpServletResponse response) {
		try {
			PrintWriter writer = response.getWriter();
			writer.append("");
			writer.flush();
			writer.close();
		} catch (IOException e2) {
			// TODO Auto-generated catch block
			e2.printStackTrace();
		}
		
		
		
		
		// 获取文件需要上传到的路径
//		String path = "D:/temp/";
		String path = request.getSession().getServletContext().getRealPath("/");
		path += "uploads/";
		File dir = new File(path);
		if (!dir.exists()) {
			dir.mkdir();
		}
		try {
			request.setCharacterEncoding("utf-8");
		} catch (UnsupportedEncodingException e1) {
			e1.printStackTrace();
		}

		DiskFileItemFactory factory = new DiskFileItemFactory();
		factory.setRepository(dir);
		factory.setSizeThreshold(1024 * 1024 * 1);// 1MB空间
		ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			List<FileItem> list = upload.parseRequest(request);
			Map<String, String> map = new HashMap<String, String>();
			FileItem fileContent = null;
			for (FileItem item : list) {
				if ("file".equals(item.getFieldName())) {
					fileContent = item;
				} else {
					map.put(item.getFieldName(), new String(item.get()));
				}
			}
			if(null == fileContent){
				
			}else{
				String fileName = (String) map.get("fileId");
				fileName = fileName.substring(fileName.lastIndexOf("."));
				SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
				String now = df.format(new Date());
				fileName = SysUtil.getId() + now + fileName;
//				fileName = "自动生成字符" + now + fileName;
				map.put("fileName", fileName);
				saveFile(fileContent, map, path);
				System.out.println(map.toString());
				
				//遍历map
				JSONObject responseJson =new JSONObject();
				responseJson.append("fileName", map.get("fileName"));
				
				PrintWriter writer = response.getWriter();
				writer.write(responseJson.toString());
				writer.flush();
				writer.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	private void saveFile(FileItem fileContent, Map<String, String> map, String path)
			throws IOException {
		String fileName = (String) map.get("fileName");
		File file = new File(path, fileName);
		file.createNewFile();
		FileOutputStream outputStream = new FileOutputStream(file);
		int size = -1;
		byte[] temp = new byte[1024];
		InputStream in = fileContent.getInputStream();
		while ((size = in.read(temp)) != -1) { // 每次读取1KB,直至读完
			outputStream.write(temp, 0, size);
		}
		outputStream.flush();
		outputStream.close();
	}
}

 

2018-02-23 18:50:07 Rolandcoder 阅读数 16905

直接进入正题,bootstrap fileinput的使用可以使文件上传时的界面更美观,想要一起传递的参数可以在初始化的时候通过uploadExtraData一起传递到后台。前边的初始化包括额外参数的传递实现还是比较方便,但是后端接收数据费了一段时间,特此记录一下,方便之后使用。

下面是初始化时候的代码:

        $("#uploadfile").fileinput({//初始化uploadfile控件
        language:'zh',
        uploadUrl:'/IntelligentMirrors/apkUpload',//初始化url参数能否重新赋值
        allowedFileExtensions:['txt'],
        uploadAsync:true,//默认异步上传
        showUpload:true,//是否显示上传按钮
        showRemove:true,//显示移除按钮
        showPreview:true,//是否显示预览
        showCaption:false,
        browseClass:"btn btn-primary",//按钮样式
        dropZoneEnable:true,//是否显示拖拽区域
        maxFileCount:1,//允许同时上传的最大文件数
        enctype:'multipart/form-data',
        validateInitialCount:true,
       
                uploadExtraData:function(){//向后台传递参数
            var data={
                apkName:$("#apkName").val(),
                  versionNum:$("#versionNum").val(),
                description:$("#description").val() 
                };
                return data; 
                },

        });

其中uploadExtraData的书写方式,由于要同时携带多个参数,所以参考了别人的博客,在此表示感谢,(没有记清楚博客地址,以后一定多加注意)。初始化过程中还需要注意的是enctype:'multipart/form-data'这个也是必须要有的。

后端除了文件之外还要接收apkName、versionNum、description三个参数,将他们存储到数据库中。

在后台处理的时候寻找这三个参数在哪儿费了挺大劲,可能也是自己个儿对整个过程的认识不太熟悉吧,于是我想到还是debug吧,好好找一下看看到底在什么地方,下边贴一下后端处理的代码吧:

MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);

在这之前一直在request里边寻找这几个参数的踪迹,但是不知道为啥都没有发现,因此转换为MultipartHttpServletRequest 来接收bootstrap fileinput传递过来的文件信息,我在MultipartHttpServletRequest 处打了一个断点,开始debug,还是像之前一样开始先看它的对象multipartRequest里边是不是有什么好玩的东西。当我看到下边图片里的东西的时候高兴坏了,哈哈哈


从multipartRequest里边的multipartParameters里边我看到了我想要的参数,能看到size是4,这是因为里边还有一个file_id字段,剩下的就好说了,但还是有地方需要注意一下:

使用multipartRequest.getParameterMap()来获取那些参数信息,如下:

Map<String, String[]> map = multipartRequest.getParameterMap();

返回值是Map<String,String[]>类型,也就是说通过get方法获取到的是一个字符数组,直接打印或者使用toString()方法可能会有问题,因此我用了一个比较笨的方法,就是把value值放到了一个ArrayList里边,然后在从list里边取出需要传递到service层的参数。简单记录一下吧:

Map<String, String[]> map = multipartRequest.getParameterMap();
Set<Entry<String, String[]>> set = map.entrySet();
Iterator<Entry<String, String[]>> iter = set.iterator();
List<String> list = new ArrayList<String>();
while(iter.hasNext()){
Entry<String,String[]> entry = iter.next();//获取到entry
String[] value = entry.getValue();
list.add(value[0].toString());

}

这样之后,参数就可以在获取以后正确的向后传递了。方法比较愚钝,主要是想要与大家分享一下这个过程,大家共同进步。向参考的博客表示感谢,以后一定注意列出链接,感谢大家,希望大家多批评指正,谢谢。

2019-03-14 21:16:40 weixin_37616043 阅读数 397

                       TP5+bootstrap管理后台,多张图片上传应用

       最近项目管理后台要整改,这过程遇到多张图片上传,查了很多资料,都是晕了,后来找到解决方案。以下代码已测试成功;

      1、首先,商品上传多张图片,不能和商品其他信息一起表单提交。那么只能用jQuery来提交,但是jQuery的$.post{}和$.ajax提交不能提交文件(视频、图片)。那其中之一的解决方案就是用 jquery.form.js  提交表单。

     2、 jquery.form.js的引用、原理、下载,我就不说了。网上很多资料。记得和jQuery.js一起引用。我用到了ajaxSubmit;

    3、功能:上传多张图片可以删除,可以图片交换顺序。删除文件时是删除源文件,源文件删除前要判断是否存在,还有屏蔽错误,以免导致程序报错,无法运行;

    案例如下:HTML代码:

<div class="space-4"></div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right">图集</label>
        <div class="col-sm-9 upload_imgs">
            <div class="file_input col-sm-5">
                <input type="file" name="file[]" multiple="multiple" class="input-img" >
                <input type="hidden" value="" name="atlas" class="atlas_id">
            </div>
            <div class="btn-img-upload">上传</div>
            <div class="imglist">
                <ul>
                    {notempty name="info['imglist']"}
                    {volist name="$info['imglist']" id="vo"}
                    <li id="{$vo.id}">
                                <span class="edit_pic_mask">
                                    <i class="fa fa-arrow-circle-left" onclick="leftShiftImage(this)"></i>
                                    <i class="fa fa-trash" onclick="removeImaged(this)"></i>
                                    <i class="fa fa-arrow-circle-right" onclick="rightShiftImage(this)"></i>
                                </span>
                        <img src="{$vo.url}" alt="" width="100%" height="100%">
                    </li>
                    {/volist}
                    {/notempty}
                </ul>
            </div>
            <span class="warning">&nbsp;* &nbsp;&nbsp;图片最大上传 2M ,图片格式允许上传 jpg、png、gif;</span>
        </div>
    </div>

js代码:

//点击上传图片
$(".btn-img-upload").click(function(){
    var idlist=new Array();
    $(".imglist ul li").each(function(){
        var idl=$(this).attr('id');
        idlist.push(idl);
    });
    var pagUrl = URL + "Admin/File/uploadImage";
    $("#myfromd").ajaxSubmit({
        url: pagUrl,
        data:{idlist:idlist},
        type: 'post',
        success: function(data) {
            if (data['code'] == 200) {
                var htmls='';
                for(var i=0;i<data['data'].length;i++){
                    htmls=htmls+"<li id='"+data['data'][i]['id']+"'><img src='"+data['data'][i]['url']+"' alt='' width='100%' height='100%'>";
                    htmls=htmls+"<span class='edit_pic_mask'><i class='fa fa-arrow-circle-left' onclick='leftShiftImage(this)'></i><i class='fa fa-trash' onclick='removeImaged(this)'></i><i class='fa fa-arrow-circle-right' onclick='rightShiftImage(this)'></i></span></li>";
                }
                $('.imglist ul').html(htmls);
                $('.imglist').css('display','block');
                idLsit();
                $(".imglist ul li").mouseover(function(){
                    var rer=$(this).children('span').css('display','block');
                });
                $(".imglist ul li").mouseout(function(){
                    var rer=$(this).children('span').css('display','none');
                });
            }else{
                layer.msg(data['msg'],{
                    icon: 2,//提示的样式
                    time: 2000 //2秒关闭(如果不配置,默认是3秒)//设置后不需要自己写定时关闭了,单位是毫秒
                });
            }
        },error : function(){
            layer.msg('链接失败',{
                icon: 2,//提示的样式
                time: 2000 //2秒关闭(如果不配置,默认是3秒)//设置后不需要自己写定时关闭了,单位是毫秒
            });
        }
    });
});

//获取
function idLsit(){
    var idlist=new Array();
    $(".imglist ul li").each(function(){
        var idl=$(this).attr('id');
        idlist.push(idl);
    });
    $('.atlas_id').val('');
    $('.atlas_id').val(idlist);
    if(idlist.length == 0){
        $('.imglist').css('display','none');
    }else{
        $('.imglist').css('display','block');
    }
}

//删除图片
function removeImaged(e){
    var pagUrl = URL + "Admin/File/delImage";
    var imgID=$(e).parent().parent().attr('id');
    var fromid=$('#fromid').val();
    $.post(pagUrl,
            {img_id:imgID,fromid:fromid},
            function(data,status){
                if(data['code'] == 200){
                    $(e).parent().parent().remove();
                    idLsit();
                }else{
                    layer.msg('删除失败',{
                        icon: 2,//提示的样式
                        time: 2000 //2秒关闭(如果不配置,默认是3秒)//设置后不需要自己写定时关闭了,单位是毫秒
                    });
                }
            });
}

//图片左移
function leftShiftImage(e){
    if($(e).parent().parent().prev()){
        $(e).parent().parent().prev().before($(e).parent().parent());
        idLsit();
    }
}

//图片右移
function rightShiftImage(e){
    if($(e).parent().parent().next()){
        $(e).parent().parent().next().after($(e).parent().parent());
        idLsit();
    }
}

PHP(TP5):代码

 //多张图片删除
    public function delImage()
    {
        $data=input();
        $fileId=$data['img_id'];
        $fromid=$data['fromid'];
        if($fileId && $fromid){
            $result=deleteFile($fileId);
            if($result){
                $cased=db('cased')->field('atlas')->where('id='.$fromid)->find();
                if($cased['atlas']){
                    $arropp=explode(',',$cased['atlas']);
                    foreach($arropp as $keys => $vals ){
                        if($vals == $fileId){
                            unset($arropp[$keys]);
                        }
                    }
                    $filelist=db('cased')->where('id='.$fromid)->update(array('atlas'=>implode(',',$arropp)));
                    if($filelist){
                        return array('code'=>200);
                    }else{
                        return false;
                    }
                }
            }else{
                return false;
            }
        }
    }

     //多张图片上传
    public function uploadImage()
    {
        $data=input();
        if($data['idlist']){
            $arrData=$data['idlist'];
        }else{
            $arrData=array();
        }
        $idList=$this->upload($arrData);
        if($idList['code'] == 300){
            return array('code'=>300,'msg'=>'请按要求上传图片');
        }elseif($idList['code'] == 200){
           foreach($idList['data'] as $key =>$value){
               if($value){
                   $filelist=db('file')->field('savename,savepath')->where('id='.$value)->find();
                   $arr['id']=$value;
                   $arr['url']="/project/Public/Uploads/".$filelist['savepath'].$filelist['savename'];
               }
               if($arr){
                   $idData[]=$arr;
                   $arr=array();
               }
           }
            return array('code'=>200,'data'=>$idData);
        }else{
            return array('code'=>300,'msg'=>'请上传图片');
        }
    }
/*图片上传(多文件)
*$arrData图片id数组
*/
public function upload($arrData){
    $files = request()->file('file');
    if($files){
        foreach($files as $file) {
            $info = $file->validate(['size' => '2097152', 'ext' => 'jpg,png,gif'])->move(DOC_ROOT . '/public/uploads/');//最大2M
            if ($info) {
                 $saveName = $info->getFilename();//图片
                 $path = date("Ymd")."/";
                 $Datalist=array(
                     'savename'=>$saveName,
                     'savepath'=>$path,
                     'ctime'=>time(),
                     'shop_id'=>session('shopid')
                 );
                  db('file')->insert($Datalist);
                  $file_id=db('file')->getLastInsID();
                  if($arrData){
                      array_push($arrData,$file_id);
                  }else{
                      $arrData[]=$file_id;
                  }
            }else{
                return array('code'=>300);
            }
        }
        return array('code'=>200,'data'=>$arrData);
    }else{
        return array('code'=>400);
    }
}
/*图片、视频源文件删除
    *返回true,false
    * $id  图片id
    */
function deleteFile($id){
    $fileList=db('file')->field('id,savename,savepath')->where('id='.$id)->find();
    if($fileList['id']){
        $url=COM_IMG_PATH.$fileList['savepath'].$fileList['savename'];
        $fileResult=file_check($url);
        if($fileResult){
            $detele_file=DOC_ROOT."/Public/Uploads/".$fileList['savepath'].$fileList['savename'];
            $result=unlink($detele_file);
            if($result){
                $list=db('file')->where('id='.$id)->delete();
                if($list){
                    return true;//删除成功
                }else{
                    return false;
                }
            }else{
                return false;
            }
        }else{
            $list=db('file')->where('id='.$id)->delete();
            if($list){
                return true;//删除成功
            }else{
                return false;
            }
        }
    }else{
        return false;
    }
}

 

/*图片、视频源文件删除前判断是否存在
    *返回true,false
    * $url 文件路径   http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/logo-domain-green3.png
    */
function file_check($url){
    //屏蔽域名不存在等访问问题的警告
    error_reporting(E_ALL ^ (E_WARNING|E_NOTICE));
    $remote_file =$url ;
    $header = get_headers($remote_file,true);
    return(isset($header[0]) && (strpos($header[0], '200') || strpos($header[0], '304')));
}

 

记得PHP中有些常量要换成你自己的定义的;有不懂得可以交流;

没有更多推荐了,返回首页