精华内容
下载资源
问答
  • bootstrap文件上传demo

    2017-11-30 15:29:05
    spring mvc+bootstrap实现文件的上传实例,文件可拖拽选择和多选。
  • 1、文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugins.krajee.com/file-basic-usage-demo。 这是一个增强的 HTML5 文件...

    2018年4月最新更新附件 做了一些优化

    1、文件上传插件File Input介绍

    这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugins.krajee.com/file-basic-usage-demo

    这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x 的扩展,实现文件上传预览,多文件上传等功能。

    一般情况下,我们需要引入下面两个文件,插件才能正常使用:

    bootstrap-fileinput/css/fileinput.min.css

    bootstrap-fileinput/js/fileinput.min.js

    这里写图片描述

    这是其中一个demo,网站有基础的和高级的demo演示,这里有不一一列出来了

    插件支持中文版,需要引入zh.js,位置在/js/locales/zh.js

    这里写图片描述
    以上是基础的引入,如需其他比如说主题请自行引入其他js和css


    本人用这个demo讲解
    这里写图片描述

    1.HTML

     <div class="form-group">
       <input id="itemImagers" name="itemImagers" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
     </div>

    2.初始化上传插件

    //初始化fileinput控件(第一次初始化)
        function initFileInput(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
                //uploadAsync: false, //插件支持同步和异步
                //showUpload: false, //是否显示上传按钮
            }).on("fileuploaded", function(event, data) {  
                //上传图片后的回调函数,可以在这做一些处理
            });
        }
    
    
    $(function(){
        //指定上传controller访问地址
        var path = 'http://localhost:8080/sbootstrap/upload';
        //页面初始化加载initFileInput()方法传入ID名和上传地址
        initFileInput("itemImagers",path);
    })
    
    

    3.使用spring的图片上传插件

    首先springMVC配置文件:

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
        xmlns:context="http://www.springframework.org/schema/context"
        xmlns:mvc="http://www.springframework.org/schema/mvc"
        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
            http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">
    
        <!-- 配置注解驱动 -->
        <mvc:annotation-driven/>
        <!-- 配置包扫描器,扫描@Controller注解的类 -->
        <context:component-scan base-package="cn.yuan"/>
        <!-- 视图解析器   自行配置
        <bean
            class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="prefix" value="/WEB-INF/jsp/" />
            <property name="suffix" value=".jsp" />
        </bean>
         -->
    
        <!-- 配置资源映射  自行配置
        <mvc:resources location="/css/" mapping="/css/**"/>
        <mvc:resources location="/js/" mapping="/js/**"/>
        <mvc:resources location="/themes/" mapping="/themes/**"/>
        <mvc:resources location="/static/" mapping="/static/**"/>
        -->
        <!-- 配置文件上传解析器-->
        <bean id="multipartResolver"
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <!-- 设定默认编码-->
            <property name="defaultEncoding" value="UTF-8"></property>
            <!-- 设定文件上传的最大值5MB,5*1024*1024-->
            <property name="maxUploadSize" value="5242880"></property>
        </bean>
    
    </beans>
    

    4.Controller

    package cn.ipanel.controller;
    
    import java.io.File;
    import java.util.UUID;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    
    
    /**
     * 上传图片
     * @author 会飞的大猿猿
     *
     */
    @Controller
    public class ItemUpload {
    
         @RequestMapping(value="/upload",method=RequestMethod.POST) 
         @ResponseBody
            private String fildUpload(@RequestParam(value="itemImagers",required=false) MultipartFile file,  
                    HttpServletRequest request,Model model)throws Exception{  
                //基本表单  
    
                //获得物理路径webapp所在路径  
                String pathRoot = request.getSession().getServletContext().getRealPath("");  
                String path="";  
                if(!file.isEmpty()){  
                    //生成uuid作为文件名称  
                    String uuid = UUID.randomUUID().toString().replaceAll("-",""); 
                    //获得文件类型(可以判断如果不是图片,禁止上传)  
                    String contentType=file.getContentType();  
                    //获得文件后缀名称  
                    String imageName=contentType.substring(contentType.indexOf("/")+1);  
                    //地址
                    path="/static/images/"+uuid+"."+imageName;  
                    file.transferTo(new File(pathRoot+path));  
                }else {
                    //可以使用以下包装类。响应结果,请看附件
                    //ResponseResult.build(400,"上传图片失败");
                }
                System.out.println(path);  
                request.setAttribute("imagesPath", path);  
                model.addAttribute("imgPath",path);
                return path;  
            }  
    }

    必须要引入的jar包

    这里写图片描述

    注意

    这个图片上传插件如果是多张图片,那么每一张图片请求一次,3张图片请求3次,所以在回调函数中,可以将返回的路径拼接好存入数据库等。

    此教程还待完善,如有好的想法可一起讨论。谢谢

    =================================
    **

    2018年4月3日更新附件

    我再后期优化了一下代码 把上传/编辑/查看图片写成的公用方法 我把附件添加上 下面是项目的demo1和demo2 有不懂得随时联系,私密我可附带QQ号. 里面包括 图片上传、编辑、查看 页面jsp和js

    https://pan.baidu.com/s/1F0sawwB4EvcuGtePy8Khsg

    **

    展开全文
  • bootstrap 图片上传实例

    万次阅读 2014-11-25 20:00:54
    html: name="file"> ()" class="btn btn-warning btn-lg">上传 <input type=hidden class=

    引入的包:


    import java.io.File;
    import java.util.Iterator;
    import java.util.UUID;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    import org.apache.commons.fileupload.FileItem;
    import org.apache.commons.fileupload.FileItemFactory;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    import org.apache.commons.io.FileUtils;
    import org.apache.struts2.ServletActionContext;
    
    import com.gzzs.util.service.HandlerPath;
    import com.opensymphony.xwork2.ActionSupport;



    html:

    <div style="margin-top: 10px; margin-left: 180px">
    	<input id="specialrecommendfile" type="file" size="30"
    	name="file">
    	<button type="button" οnclick="UploadSpecialRecommendPic()"
    	class="btn btn-warning btn-lg">上传</button>
    	<input type=hidden class="span5" id="specialRecommendPic"
    	name="riIndexPic">
    </div>

    js:

    function UploadSpecialRecommendPic() {
    	$.ajaxFileUpload({
    		url : '/GZZSServer/s_util/uploadSpecialRecommendPic.action',
    		secureuri : false,
    		fileElementId : 'specialrecommendfile',
    		dataType : 'json',
    		success : function(d, status) {
    			var data = eval('(' + d + ')');
    			alert(data.msg);
    			if (data.flag == 1) {
    				$("#SpecialTopicPicShow").attr("src", data.path);
    				$("#specialRecommendPic").val(data.picName);
    			}
    		},
    		error : function(data, status, e) {
    			alert(e);
    		}
    	});
    }
    

    action:

    public String uploadSpecialRecommendPic() {
    		try {
    			String path;
    			path = "C://";
    			FileUtils.copyFile(file, new File(path));
    			result = "{flag:\"1\",msg:\"操作成功\",path:\""
    					+ HandlerPath.getHostSimulateAuthorLogoPath()
    					+ fileFileName + "\",picName:\"" + fileFileName + "\"}";
    			return SUCCESS;
    		} catch (Exception e) {
    			e.printStackTrace();
    			result = "{flag:\"0\",msg:\"操作失败\"}";
    			return SUCCESS;
    		}
    }

    实例图片:


    展开全文
  • bootstrap fileinput 上传图片

    千次阅读 2017-07-15 15:19:44
    首先jsp页面引用必要的文件,说明一下本人侧重讲上传图片功能,所以引入文件只列举与上传图片相关的文件,以下分别为css和js文件 <link rel="stylesheet" type="text/css" hr
     首先jsp页面引用必要的文件,说明一下本人侧重讲上传图片功能,所以引入文件只列举与上传图片相关的文件,以下分别为css和js文件
    
     <link rel="stylesheet" type="text/css" href="../css/plugins/webuploader/webuploader.css">
        <link rel="stylesheet" type="text/css" href="../css/demo/webuploader-demo.min.css">
        <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <script src="../js/plugins/webuploader/webuploader.min.js"></script>
    <script src="../js/demo/webuploader-demo.min.js"></script>

    jsp页面的上传图片代码片段为:

    <div class="row">
       <div class="ibox-content form-horizontal" style="padding-bottom: 0px">
         <div class="row mt20">
           <div class="form-group col-sm-4 col-md-8">  
            <label class="col-sm-4 col-md-3 control-label" >身份证正面:</label>
            <div class="col-sm-8 col-md-8">
                <input id="file-1" type="file"  class="file" data-overwrite-initial="false" data-min-file-count="1">
                <p class="help-block">支持jpg、jpeg、png格式,大小不超过2.0M</p>  
             </div>
        </div>
    </div>

    js中处理上传的代码如下:

    $("#file-1").fileinput({
            language: 'zh',
            uploadUrl: '${ctxPath}/uploadfile/upload.htm', //上传处理的路径
            allowedFileExtensions : ['jpg', 'png','jpeg'],//支持的格式
            overwriteInitial: true,
            maxFileSize: 2000,//文件最大支持
            maxFilesNum: 1,//文件数量
            maxFileCount: 1,
            showUpload: false, //是否展示上传按钮
            dropZoneTitle: '这里上传身份证<br>可直接将图片拖入虚线框中!',
            slugCallback: function(filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on("filebatchselected", function(event, files) {  
                        $(this).fileinput("upload");  
                        })  
                        .on("fileuploaded", function(event, data) { 
                            $("#file-1").attr("filename",data.response);  
       });

    后台处理上传逻辑代码如下:

    @Controller
    @RequestMapping("/uploadfile")
    public class UploadCtrl {
        @RequestMapping("/upload")
        @ResponseBody
        public Object upload(HttpServletRequest request){
            UpdateUtils UpdateUtils = new AlibabaUpdateUtils();
            FileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            upload.setHeaderEncoding("UTF-8");
            try {
                List items = upload.parseRequest(request);
                String[] filenames = new String[1];
                ;
                InputStream[] inputStreams = new InputStream[1];
                if (null != items) {
                    Iterator itr = items.iterator();
                    int i = 0;
                    while (itr.hasNext()) {
                        FileItem item = (FileItem) itr.next();
    
                        if (item.isFormField()) {
                            continue;
                        } else if(StringUtils.isEmpty(item.getName())){
                            continue;
                        }else{
                                // 以当前精确到秒的日期为上传的文件的文件名
                                filenames[0] ="onccc" + System.currentTimeMillis();
                            }
                            inputStreams[0] = item.getInputStream();
                        }
                    }
                    AlibabaUpdateUtils.update(filenames, inputStreams);
                    URL url = AlibabaUpdateUtils.geturl(filenames[0], "122", "92");
                    JSONObject obj = new JSONObject();
                    obj.put("url", url.toString());
                    return url.toString();
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return null;
    
        }

    工具类代码:

    public class AlibabaUpdateUtils{
    
    
        static String endpoint = null,accessKeyId = null,accessKeySecret = null,bucketName=null;
        String keyPrefix;
        public String getKeyPrefix() {
            if(keyPrefix==null)
                try {
                    keyPrefix = PropertieUtils.getProperty("aliyun.oss.key");
                } catch (IOException e) {e.printStackTrace();}
            return keyPrefix;
        }
    
        public void setKeyPrefix(String keyPrefix) {
            this.keyPrefix = keyPrefix;
        }
    
        static{
            try {
                endpoint = PropertieUtils.getProperty("aliyun.oss.endpoint");
                accessKeyId = PropertieUtils.getProperty("aliyun.oss.accessKeyId");
                accessKeySecret = PropertieUtils.getProperty("aliyun.oss.accessKeySecret");
                bucketName =  PropertieUtils.getProperty("aliyun.oss.bucketName");
    
    
            } catch (IOException e) {e.printStackTrace();}
        }
        public List<String> update(String[] filenames, InputStream[] inputStreams) {
            OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
    
    
            List<String> fileNameList = new ArrayList<String>();
            for(int i =0;i<filenames.length;i++){
                String fullfileName  = getKeyPrefix() +filenames[i];
                 ossClient.putObject(bucketName, fullfileName, inputStreams[i]);
                 fileNameList.add(fullfileName);
            }
            ossClient.shutdown();
            return fileNameList;
        }
        public URL geturl(String filename,String w,String h) {
    
            return geturl(filename, w, h, 10);
        }
    public URL geturl(String filename,String w,String h,long delay) {
            OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
               // 图片处理样式
            if(StringUtils.isEmpty(w))
                w= "100";
            if(StringUtils.isEmpty(h))
                h= "100";
            String style = "image/resize,m_fixed,w_"+w+",h_"+h;
            // 过期时间10分钟
    
            Date expiration = new Date(new Date().getTime() + 1000 * 60 * delay );
            GeneratePresignedUrlRequest req = new GeneratePresignedUrlRequest(bucketName, getKeyPrefix()+filename, HttpMethod.GET);
            req.setExpiration(expiration);
            req.setProcess(style);
            URL signedUrl = ossClient.generatePresignedUrl(req);
            ossClient.shutdown();
            return signedUrl;
        }
        }

    本项目是将图片上传到阿里云服务器,可以返回图片路径和图片名。
    这里写图片描述

    展开全文
  • 1.基本配置,支持的元素类型 2.自动布局 ...9、图片上传 图片有点大了,屏幕不够大的话可能看的不习惯,没事 后面我截图的实际尽量弄小点O(∩_∩)O~~ 接下来进入实战吧:感兴趣的朋友请持续关注下篇。
  • Bootstrap fileinput 上传Excel附带图片展示

    效果图:

    本来只是一个Excel文件得上传,后来想到图片上传也很多,修改了一个可以上传图片的后缀,让他加看看效果,不多说这边附上上传全部代码:

    源码以及API地址:

    bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput

    bootstrap-fileinput在线API:http://plugins.krajee.com/file-input

    bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo


    前台jsp:

    <link href="<%=basePath %>bootstrap/css/fileinput.min.css" rel="stylesheet">
    <script type="text/javascript" src="<%=basePath %>bootstrap/js/fileinput.min.js" charset="UTF-8"></script>
        <script type="text/javascript" src="<%=basePath %>bootstrap/js/fileinput.zh-CN.js" charset="UTF-8"></script>
    <button id="button_imp" class="btn btn-sm btn-primary">导入设备</button>
    <form>
            <div class="modal fade" id="myModal_file_upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
                        </div>
                        <div class="modal-body">
    <!--                         <a href="~" class="form-control" style="border:none;">下载导入模板</a> -->
                                 <h4 class="modal-title" id="myModalLabel">导入设备</h4>
                            <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
                            <!-- <input type="file" /> -->
                        </div>
                    </div>
                </div>
            </div>
        </form>

    前台js:

    jQuery(function($) {
    	var oFileInput = new FileInput();
        oFileInput.Init("txt_file", "uploadExcel.action");
    /** 导入弹窗 */
        $("#button_imp").click(function(event) {
            /* Act on the event */
            $("#myModal_file_upload").modal();
        });
    }
    //初始化fileinput
    	var FileInput = function () {
    	    var oFile = new Object();
    
    	    //初始化fileinput控件(第一次初始化)
    	    oFile.Init = function(ctrlName, uploadUrl) {
    	    var control = $('#' + ctrlName);
    
    	    //初始化上传控件的样式
    	    control.fileinput({
    	        language: 'zh', //设置语言
    	        uploadUrl: uploadUrl, //上传的地址
    	        allowedFileExtensions: ['xlsx', 'xls','png'],//接收的文件后缀
    	        showUpload: true, //是否显示上传按钮
    	        showCaption: false,//是否显示标题
    	        browseClass: "btn btn-primary", //按钮样式
    	        //dropZoneEnabled: false,//是否显示拖拽区域
    	        //minImageWidth: 50, //图片的最小宽度
    	        //minImageHeight: 50,//图片的最小高度
    	        //maxImageWidth: 1000,//图片的最大宽度
    	        //maxImageHeight: 1000,//图片的最大高度
    	        //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
    	        //minFileCount: 0,
    	        maxFileCount: 2, //表示允许同时上传的最大文件个数
    	        enctype: 'multipart/form-data',
    	        validateInitialCount:true,
    	        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
    	        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
    	    })
    	    //导入文件上传完成之后的事件
    	    $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
    	        $("#myModal_file_upload").modal("hide");
    	        var data = data.jqXHR.responseJSON;
    	        if (data == true) {
        	        toastr.success("上传成功");
    	        }
    	        if (data == false) {
    		        toastr.error("上传失败,存在相同数据,请检查数据");
    	        }
    	    });
    	}
    	    return oFile;
    	};


    这边后台用的java,贴出代码:

    	public String upload() throws FileNotFoundException, IOException {
            HttpServletRequest req = ServletActionContext.getRequest();
            MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) req;
            File[] fileNames = wrapper.getFiles("txt_file");
            InputStream is = new FileInputStream(fileNames[0]);
            String[] filenames = wrapper.getFileNames("txt_file");
            String name = filenames[0];
            EquipmentInfoService equipmentInfoService=(EquipmentInfoService)SpringUtil.getObject("equipmentInfoService");
            EquipmentInfo equipmentInfoExa=new EquipmentInfo();
            Page page=new Page();
            List<EquipmentInfo> equipmentInfoLists=equipmentInfoService.findEquipmentInfo(equipmentInfoExa, page);
            
            OK:
            if (name.toUpperCase().endsWith(".XLS")
                    || name.toUpperCase().endsWith(".XLSX")) {
                List<String[]> datas = null;
                ExcelSheetParser parser = new ExcelSheetParser(is, name);
                for (int n = 0; n < parser.getNumberOfSheets(); n++) {
                    if (name.toUpperCase().endsWith(".XLS")) {
                        datas = parser.getDatasInSheet2003(n);
                    } else if (name.toUpperCase().endsWith(".XLSX")) {
                        datas = parser.getDatasInSheet2007(n);
                    }
                    if (n == 0) {// 设备信息
                        for(int i = 1; i < datas.size(); i++){
                            String[] row1 = datas.get(i);
                            boolean flag=false;
                            for(EquipmentInfo equipmentInfo:equipmentInfoLists){
                                if(equipmentInfo.getCompanyId().equals(row1[0])){
                                    if(equipmentInfo.getDeviceIP().equals(row1[6])){
                                        flag=true;
                                    }
                                }
                            }
                            
                            if(flag){
                                this.setJsonStr("false");
                                break OK ;
                            }
                        }
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
                            EquipmentInfo equipmentInfo = new EquipmentInfo();
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    equipmentInfo.setCompanyId(row[0]);
                                    break;
                                case 1:
                                    equipmentInfo.setCompanyName(row[1]);
                                    break;
                                case 2:
                                    equipmentInfo.setMachineRoom(row[2]);
                                    break;
                                case 3:
                                    equipmentInfo.setEquipmentCabinet(row[3]);
                                    break;
                                case 4:
                                    equipmentInfo.setDeviceType(row[4]);
                                    break;
                                case 5:
                                    equipmentInfo.setDeviceName(row[5]);
                                    break;
                                case 6:
                                    equipmentInfo.setDeviceIP(row[6]);
                                    break;
                                case 7:
                                    equipmentInfo.setDeviceBrand(row[7]);
                                    break;
                                case 8:
                                    equipmentInfo.setDeviceModel(row[8]);
                                    break;
                                case 9:
                                    equipmentInfo.setPosition(row[9]);
                                    break;
                                case 10:
                                    equipmentInfo.setDeviceSN(row[10]);
                                    break;
                                case 11:
                                    equipmentInfo.setDevicePN(row[11]);
                                    break;
                                case 12:
                                    equipmentInfo.setOperatingSystem(row[12]);
                                    break;
                                case 13:
                                    equipmentInfo.setInTime(row[13]);
                                    break;
                                case 14:
                                    equipmentInfo.setWarrantyTime(row[14]);
                                    break;
                                case 15:
                                    equipmentInfo.setServiceMode(row[15]);
                                    break;
                                case 16:
                                    equipmentInfo.setUseYear(row[16]);
                                    break;
                                case 17:
                                    equipmentInfo.setSupplyCom(row[17]);
                                    break;
                                case 18:
                                    equipmentInfo.setSubordinateSystem(row[18]);
                                    break;
                                case 19:
                                    equipmentInfo.setInstallationLocation(row[19]);
                                    break;
                                case 20:
                                    equipmentInfo.setWhetherState_owned(row[20]);
                                    break;
                                case 21:
                                    equipmentInfo.setSerialNumber(row[21]);
                                    break;
                                case 22:
                                    equipmentInfo.setRemarks(row[22]);
                                    break;
                                }
                            }
    
                            service.addEquipmentInfo(equipmentInfo);
                        }
                    }
                    if (n == 1) {// CPU
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
                            CpuInfo cpuInfo = new CpuInfo();
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    cpuInfo.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    cpuInfo.setDeviceName(row[1]);
                                    break;
                                case 2:
                                    cpuInfo.setDeviceBrand(row[2]);
                                    break;
                                case 3:
                                    cpuInfo.setDeviceModel(row[3]);
                                    break;
                                case 4:
                                    cpuInfo.setDeviceSN(row[4]);
                                    break;
                                case 5:
                                    cpuInfo.setNewUpdatetime(row[5]);
                                    break;
                                case 6:
                                    cpuInfo.setRemarks(row[6]);
                                    break;
                                }
                            }
    
                            service.addCpuInfo(cpuInfo);
                        }
                    }
                    if (n == 2) {// 内存
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
    
                            MemoryInfo memoryInfo = new MemoryInfo();
    
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    memoryInfo.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    memoryInfo.setDeviceName(row[1]);
                                    break;
                                case 2:
                                    memoryInfo.setDeviceBrand(row[2]);
                                    break;
                                case 3:
                                    memoryInfo.setSpeed(row[3]);
                                    break;
                                case 4:
                                    memoryInfo.setCapacity(row[4]);
                                    break;
                                case 5:
                                    memoryInfo.setDeviceSN(row[5]);
                                    break;
                                case 6:
                                    memoryInfo.setNewUpdatetime(row[6]);
                                    break;
                                case 7:
                                    memoryInfo.setRemarks(row[7]);
                                    break;
                                }
                            }
    
                            service.addMemoryInfo(memoryInfo);
                        }
                    }
                    if (n == 3) {// 硬盘
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
    
                            HarddiskInfo harddiskInfo = new HarddiskInfo();
    
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    harddiskInfo.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    harddiskInfo.setDeviceName(row[1]);
                                    break;
                                case 2:
                                    harddiskInfo.setDeviceBrand(row[2]);
                                    break;
                                case 3:
                                    harddiskInfo.setDeviceModel(row[3]);
                                    break;
                                case 4:
                                    harddiskInfo.setCapacity(row[4]);
                                    break;
                                case 5:
                                    harddiskInfo.setSpeed(row[5]);
                                    break;
                                case 6:
                                    harddiskInfo.setInterface(row[6]);
                                    break;
                                case 7:
                                    harddiskInfo.setDeviceSN(row[7]);
                                    break;
                                case 8:
                                    harddiskInfo.setNewUpdatetime(row[8]);
                                    break;
                                case 9:
                                    harddiskInfo.setDevicePN(row[9]);
                                    break;
                                case 10:
                                    harddiskInfo.setRemarks(row[10]);
                                    break;
                                }
                            }
    
                            service.addHarddiskInfo(harddiskInfo);
                        }
                    }
                    if (n == 4) {// 电源
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
    
                            PowerInfoEc powerInfoEc = new PowerInfoEc();
    
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    powerInfoEc.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    powerInfoEc.setDeviceName(row[1]);
                                    break;
                                case 2:
                                    powerInfoEc.setDeviceBrand(row[2]);
                                    break;
                                case 3:
                                    powerInfoEc.setDeviceModel(row[3]);
                                    break;
                                case 4:
                                    powerInfoEc.setRatedVoltage(row[4]);
                                    break;
                                case 5:
                                    powerInfoEc.setDeviceSN(row[5]);
                                    break;
                                case 6:
                                    powerInfoEc.setNewUpdatetime(row[6]);
                                    break;
                                case 7:
                                    powerInfoEc.setRemarks(row[7]);
                                    break;
                                }
                            }
    
                            service.addPowerInfoEc(powerInfoEc);
                        }
                    }
                    if (n == 5) {// 风扇
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
    
                            FanInfoEc fanInfoEc = new FanInfoEc();
    
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    fanInfoEc.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    fanInfoEc.setDeviceName(row[1]);
                                    break;
                                case 2:
                                    fanInfoEc.setDeviceBrand(row[2]);
                                    break;
                                case 3:
                                    fanInfoEc.setDeviceModel(row[3]);
                                    break;
                                case 4:
                                    fanInfoEc.setDeviceSN(row[4]);
                                    break;
                                case 5:
                                    fanInfoEc.setNewUpdatetime(row[5]);
                                    break;
                                case 6:
                                    fanInfoEc.setRemarks(row[6]);
                                    break;
                                }
                            }
    
                            service.addFanInfoEc(fanInfoEc);
                        }
                    }
                    if (n == 6) {// 网卡
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
    
                            NetworkcardInfo networkcardInfo = new NetworkcardInfo();
    
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    networkcardInfo.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    networkcardInfo.setDeviceName(row[1]);
                                    break;
                                case 2:
                                    networkcardInfo.setDeviceBrand(row[2]);
                                    break;
                                case 3:
                                    networkcardInfo.setDeviceModel(row[3]);
                                    break;
                                case 4:
                                    networkcardInfo.setSpeed(row[4]);
                                    break;
                                case 5:
                                    networkcardInfo.setDeviceSN(row[5]);
                                    break;
                                case 6:
                                    networkcardInfo.setNewUpdatetime(row[6]);
                                    break;
                                case 7:
                                    networkcardInfo.setRemarks(row[7]);
                                    break;
                                }
                            }
    
                            service.addNetworkcardInfo(networkcardInfo);
                        }
                    }
                    if (n == 7) {// 应用
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
    
                            EApplication application = new EApplication();
    
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    application.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    application.setSystemName(row[1]);
                                    break;
                                case 2:
                                    application.setSystemIp(row[2]);
                                    break;
                                case 3:
                                    application.setOperatingSystem(row[3]);
                                    break;
                                case 4:
                                    application.setDatabase(row[4]);
                                    break;
                                case 5:
                                    application.setApplication(row[5]);
                                    break;
                                case 6:
                                    application.setNewUpdatetime(row[6]);
                                    break;
                                case 7:
                                    application.setDecimals(row[7]);
                                    break;
                                case 8:
                                    application.setPatchVersionnumber(row[8]);
                                    break;
                                case 9:
                                    application.setRemarks(row[9]);
                                    break;
                                }
                            }
    
                            service.addEApplication(application);
                        }
                    }
                    if (n == 8) {// 其它
                        for (int i = 1; i < datas.size(); i++) {// 显示数据
                            String[] row = datas.get(i);
    
                            Other other = new Other();
    
                            for (int a = 0; a < row.length; a++) {
                                switch (a) {
                                case 0:
                                    other.setDeviceIP(row[0]);
                                    break;
                                case 1:
                                    other.setDeviceName(row[1]);
                                    break;
                                case 2:
                                    other.setDeviceBrand(row[2]);
                                    break;
                                case 3:
                                    other.setDeviceModel(row[3]);
                                    break;
                                case 4:
                                    other.setDeviceSN(row[4]);
                                    break;
                                case 5:
                                    other.setNewUpdatetime(row[5]);
                                    break;
                                case 6:
                                    other.setRouteSpeed(row[6]);
                                    break;
                                case 7:
                                    other.setRouteNumber(row[7]);
                                    break;
                                case 8:
                                    other.setRemarks(row[8]);
                                    break;
                                }
                            }
    
                            service.addOther(other);
                        }
                    }
                }
                this.setJsonStr("true");
            }
            return SUCCESS;
        }
        
    本文上传的也是excel文件。




    展开全文
  • Bootstrap 文件上传组件 --- Bootstrap fileinput 使用方法记录 上传文件 一、下载地址 1、下载: https://github.com/kartik-v/bootstrap-fileinput 2、demo: ...
  • 自己可以扩展成多张 借助于bootstrap 体验很好 原型来自于花田网站的上图图片的功能。 基本思路:用户点击相关div触发file元素打开浏览框----》用setInterval不断检测file文件是否选中文件---》选中之后触发form...
  • MVC 图片上传Demo

    热门讨论 2013-11-20 15:44:04
    一个form 一个file 上传四张图片。自己可以扩展成多张 借助于bootstrap 体验很好 原型来自于花田网站的上图图片的功能。
  • 1.基本配置,支持的元素类型 ...9、图片上传 图片有点大了,屏幕不够大的话可能看的不习惯,没事 后面我截图的实际尽量弄小点O(∩_∩)O~~ 接下来进入实战吧: 下一章:BootStrap 智能表单系列 二Boo...
  • spingboot+mybatis+bootstrap 学生信息管理系统+图片上传下载系统Demo 适合新手入门学习使用,功能包括:学生信息录入、查询、删除;图片上传、下载、展示   界面截图:   下载链接:源码下载    ....
  • 最近找了一个比较好用的图片和文件上传插件,Bootstrap-file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,无论是aspx.net 还是MVC.net 都适合,拖曳文件上传等炫酷的功能,...
  • bootstrap文件上传插件

    千次阅读 2017-08-21 16:33:58
    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印...
  • 源码以及API地址: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:...bootstrap-fileinput Demo展示:http://plugins.krajee
  • Bootstrap图片展示界面Demo

    千次阅读 2019-01-14 15:11:00
    代码:(使用模板引擎freemarker) 1 <!DOCTYPE html> 2 <html> 3 <head>...图片</title> 5 <meta charset="UTF-8"/> 6 <meta name="viewport" content...
  • bootstrap fileinput 上传插件

    千次阅读 2017-02-17 09:24:03
    bootstrap fileinput 上传插件
  • Bootstrap图片展示界面Demo2

    千次阅读 2019-01-14 17:34:00
    代码:(使用模板引擎freemarker) <!DOCTYPE html> <html> <...图片</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-wid...
  • Bootstrap文件上传组件

    2017-09-15 12:36:42
    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。 一、demo   二、插件引入 link type="text/css" rel="stylesheet" href=...
  • 前言:之前的三篇介绍了下bootstrap的一些常用组件,发现博主...既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个组件:boo...
  • //上传图片的url theme: 'fa' , language: 'zh' , //设置语言 //showUpload: false, //是否显示上传按钮 //showRemove:false, // 是否显示移除按钮 overwriteInitial : false , maxFileSize : ...
  • 一、使用方法1、导入依赖的js和css文件:<link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-3.2.1.js" ></script> <s
  • 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种...既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个
  • 关于上传图片Demo

    2018-11-22 18:14:41
    平时我们需要做个简单的demo,来上传图片,那么我们应该怎么做呢?详细demo如下: 以下是前台demo: &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,446
精华内容 1,778
关键字:

bootstrap图片上传demo