精华内容
下载资源
问答
  • Layui多图上传

    千次阅读 2019-07-15 15:25:20
    Layui多图上传 最近制作经销商上传附件需要实现一个多图上传的功能,前端使用的是layui框架支持多张图片上传,效果如下 前端页面代码: <!--图片上传组件--> <div class="layui-form-item"> <div...

    Layui多图上传

    最近制作经销商上传附件需要实现一个多图上传的功能,前端使用的是layui框架支持多张图片上传,效果如下
    在这里插入图片描述
    前端页面代码:

         <!--图片上传组件-->
          <div class="layui-form-item">
            <div class="layui-input-block">
              <div id="imgContentForEdit">
                <input type="hidden" id="attachListForEdit" name="attachList"/>
                <div class="layui-form-item">
                  <table class="layui-table">
                    <thead>
                    <tr>
                      <th>文件名</th>
                      <th>状态</th>
                      <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="demoListForEdit"></tbody>
                  </table>
                </div>
              </div>
    
              <div class="layui-input-inline">
                <button type="button" id="uploadForEdit" class="layui-btn layui-btn-primary">
                  点击选择
                </button>
              </div>
              <div class="layui-input-inline">
                <button type="button" id="uploadActionForEdit" class="layui-btn layui-btn-primary">
                  <i class="layui-icon"></i>开始上传
                </button>
              </div>
            </div>
          </div>
    

    使用前需引入layui相关的js、css文件:

    
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js、css路径需要改成你本地的 -->
    

    js核心代码

    ;layui.define(['jquery', 'table', 'form', 'layer', 'laydate', 'upload'], function (exports) {
      "use strict";
      var $ = layui.$, table = layui.table, layer = layui.layer, laydate = layui.laydate,
        upload = layui.upload, form = layui.form, admin = layui.admin,setter = layui.setter;
    
    //定义请求接口
      var path = {
        uploadPic: '/merchantInfo/uploadPic',
        img:  '/readImage',
      };
    
      var imgList=[];
      var deleteList=[];
      //新增多文件列表示例
      var demoListView = $('#demoListForAdd');
      var  uploadListIns = upload.render({
        elem: '#uploadForAdd' ,
       url: window.ptfConfig.baseUrl + path.uploadPic,		//上传图片接口,可自行更换
        headers: { //通过 request 头传递
        Authorization: layui.data(setter.tableName)[setter.headers.accessTokenName]
      },	
        accept: 'file',
        multiple: true,
        auto: false,
        bindAction: '#uploadActionForAdd',
        choose: function(obj){
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function(index, file, result){
    
            var tr = $(['<tr id="upload-'+ index +'">'
              ,'<td>'+ file.name +'</td>'
              ,'<td>等待上传</td>'
              ,'<td>'
              ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
              ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
              ,'</td>'
              ,'</tr>'].join(''));
    
            //删除
            tr.find('.demo-delete').on('click', function(){
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
            });
    
            demoListView.append(tr);
          });
        }
        ,done: function(res, index, upload){
          if(res.code == 200){ //上传成功
            //创建附件对象
                console.log(res.data)
            var attcah={};
            attcah.attachType=res.data[0].type;
            attcah.attachName=res.data[0].originalFileName;
            attcah.url=res.data[0].url;
            attcah.fileName=res.data[0].serveFileName;
            imgList.push(attcah);//加入数组
            var tr = demoListView.find('tr#upload-'+ index)
              ,tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            return delete this.files[index]; //删除文件队列已经上传成功的文件
          }
          this.error(index, upload);
        }
        ,error: function(index, upload){
          var tr = demoListView.find('tr#upload-'+ index),
            tds = tr.children();
          tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
          tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
      });
    

    后端控制层

    import com.hrt.framework.web.core.Result;
    import com.hrt.zxxc.fxspg.file.FileBean;
    import com.hrt.zxxc.fxspg.file.FileService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    import javax.servlet.http.HttpServletRequest;
    import java.util.List;
    /**
     * MerchantInfoInfo Controller层
     *
     * @author generator
     * @version 1.0.0
     * @date 2019-06-27 17:28:12
     */
    @Controller
    @RequestMapping("merchantInfo")
    public class PtfMerchantInfoController {
    
        @Autowired
        private FileService fileService;
        
        /**
         * @Param [file, request]
         * @return com.hrt.framework.web.core.Result
         * @Author youjp
         * @Description //TODO 图片上传
         * @throw
         **/
        @PostMapping(value = "uploadPic")
        @ResponseBody
        public Result uploadPic(MultipartFile[] file, HttpServletRequest request) {
            List<FileBean> filePathList = fileService.upload(request, file);
            return Result.success(filePathList);
        }
    }
    
    

    FileService

    package com.hrt.zxxc.fxspg.file;
    
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Service;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.BufferedInputStream;
    import java.io.File;
    import java.io.FileInputStream;
    import java.util.ArrayList;
    import java.util.Calendar;
    import java.util.List;
    
    /**
     * @program: fxspg
     * @description:
     * @author: youjp
     * @create: 2019-06-21 11:05
     **/
    @Service
    public class FileService {
    
        @Value("${image.uploadPath}")
        private String imageUploadPath;
    
        public List<FileBean> upload(HttpServletRequest request, MultipartFile[] files) {
            List<FileBean> filePath = new ArrayList<>();
            Calendar cal = Calendar.getInstance();
            try {
                for (MultipartFile file : files) {
                    //todo 前端传递业务类型。判断能否上传
                    String originalFilename = file.getOriginalFilename();
                    String type = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."),file.getOriginalFilename().length());
                    String fullFileName = System.currentTimeMillis() + type;
                    String serveFileName = fullFileName.substring(0,fullFileName.lastIndexOf("."));
                    String originalName = file.getOriginalFilename().substring(0, file.getOriginalFilename().lastIndexOf("."));
                    Calendar calendar = Calendar.getInstance();
                    int year = calendar.get(Calendar.YEAR);
                    int month = calendar.get(Calendar.MONTH) + 1;
                    int day = calendar.get(Calendar.DAY_OF_MONTH);
                    String savePath = imageUploadPath + "/"+ year + "/" + month + "/"+ day + "/" + fullFileName;
                    File target = new File(savePath);
                    if (!target.getParentFile().exists()) {
                        target.getParentFile().mkdirs();
                    }
                    file.transferTo(target);
                    //信息封装
                    savePath =  "/"+ year + "/" + month + "/"+ day + "/" + fullFileName;
    
                    FileBean fileBean = new FileBean(serveFileName,originalName,savePath,type);
                    //返回文件在服务器的地址
                    filePath.add(fileBean);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return filePath;
        }
    
        public void readFile(String fileName, String folder, HttpServletRequest request, HttpServletResponse response) {
    
            try {
                response.setContentType("image/jpeg");
                //发头控制浏览器不要缓存
                response.setDateHeader("expries", -1);
                response.setHeader("Cache-Control", "no-cache");
                response.setHeader("Pragma", "no-cache");
                String root_path = imageUploadPath + File.separator + folder + File.separator + fileName;
    
                ServletOutputStream outputStream = response.getOutputStream();
                FileInputStream fileInputStream = new FileInputStream(new File(root_path));
                BufferedInputStream bufferedInputStream = new BufferedInputStream(
                        fileInputStream);
                byte[] b = new byte[bufferedInputStream.available()];
                bufferedInputStream.read(b);
                outputStream.write(b);
    
                outputStream.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
    
        }
    
        public void readFile(String url, HttpServletRequest request, HttpServletResponse response) {
    
            try {
                response.setContentType("image/jpeg");
                //发头控制浏览器不要缓存
                response.setDateHeader("expries", -1);
                response.setHeader("Cache-Control", "no-cache");
                response.setHeader("Pragma", "no-cache");
                String root_path = imageUploadPath + File.separator + url;
    
                ServletOutputStream outputStream = response.getOutputStream();
                FileInputStream fileInputStream = new FileInputStream(new File(root_path));
                BufferedInputStream bufferedInputStream = new BufferedInputStream(
                        fileInputStream);
                byte[] b = new byte[bufferedInputStream.available()];
                bufferedInputStream.read(b);
                outputStream.write(b);
    
                outputStream.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
    
        }
    }
    
    

    FileBean.java

    package com.hrt.zxxc.fxspg.file;
    
    /**
     * @program: hrt-component2
     * @description:
     * @author: jp
     * @create: 2019-06-21 11:18
     **/
    public class FileBean {
    
        private String serveFileName;
    
        private String originalFileName;
    
        private String url;
    
        private String type;
    
        public FileBean(String serveFileName, String originalFileName, String url, String type) {
            this.serveFileName = serveFileName;
            this.originalFileName = originalFileName;
            this.url = url;
            this.type = type;
        }
    
        public FileBean() {
        }
    
        public String getServeFileName() {
            return serveFileName;
        }
    
        public void setServeFileName(String serveFileName) {
            this.serveFileName = serveFileName;
        }
    
        public String getOriginalFileName() {
            return originalFileName;
        }
    
        public void setOriginalFileName(String originalFileName) {
            this.originalFileName = originalFileName;
        }
    
        public String getUrl() {
            return url;
        }
    
        public void setUrl(String url) {
            this.url = url;
        }
    
        public String getType() {
            return type;
        }
    
        public void setType(String type) {
            this.type = type;
        }
    }
    
    

    响应工具: Result.java

    //
    // Source code recreated from a .class file by IntelliJ IDEA
    // (powered by Fernflower decompiler)
    //
    
    package com.hrt.framework.web.core;
    
    import com.hrt.framework.commons.utils.JsonUtils;
    import com.hrt.framework.web.core.enums.ResultEnum;
    
    public class Result {
        private int code;
        private String msg;
        private Object data;
    
        public Result() {
        }
    
        public Result(int code, String msg) {
            this.code = code;
            this.msg = msg;
        }
    
        public Result(int code, String msg, Object data) {
            this.code = code;
            this.data = data;
        }
    
        public int getCode() {
            return this.code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
        public String getMsg() {
            return this.msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public Object getData() {
            return this.data;
        }
    
        public void setData(Object data) {
            this.data = data;
        }
    
        public static Result success() {
            Result result = new Result();
            result.setCode(ResultEnum.SUCCESS.getCode());
            result.setMsg(ResultEnum.SUCCESS.getMsg());
            return result;
        }
    
        public static Result success(Object data) {
            Result result = new Result();
            result.setCode(ResultEnum.SUCCESS.getCode());
            result.setMsg(ResultEnum.SUCCESS.getMsg());
            result.setData(data);
            return result;
        }
    
        public static Result fail() {
            Result result = new Result();
            result.setCode(ResultEnum.FAIL.getCode());
            result.setMsg(ResultEnum.FAIL.getMsg());
            return result;
        }
    
        public static Result fail(Object data) {
            Result result = new Result();
            result.setCode(ResultEnum.FAIL.getCode());
            result.setMsg(ResultEnum.FAIL.getMsg());
            result.setData(data);
            return result;
        }
    
        public static Result internalError() {
            Result result = new Result();
            result.setCode(ResultEnum.INTERNAL_ERROR.getCode());
            result.setMsg(ResultEnum.INTERNAL_ERROR.getMsg());
            return result;
        }
    
        public static Result internalError(Object data) {
            Result result = new Result();
            result.setCode(ResultEnum.INTERNAL_ERROR.getCode());
            result.setMsg(ResultEnum.INTERNAL_ERROR.getMsg());
            result.setData(data);
            return result;
        }
    
        public static Result illegalArguments(Object data) {
            Result result = new Result();
            result.setCode(ResultEnum.ILLEGAL_ARGUMENTS.getCode());
            result.setMsg(ResultEnum.ILLEGAL_ARGUMENTS.getMsg());
            result.setData(data);
            return result;
        }
    
        public static Result illegalArguments() {
            Result result = new Result();
            result.setCode(ResultEnum.ILLEGAL_ARGUMENTS.getCode());
            result.setMsg(ResultEnum.ILLEGAL_ARGUMENTS.getMsg());
            return result;
        }
    
        public static Result missingParameter(Object data) {
            Result result = new Result();
            result.setCode(ResultEnum.MISSING_PARAMETER.getCode());
            result.setMsg(ResultEnum.MISSING_PARAMETER.getMsg());
            result.setData(data);
            return result;
        }
    
        public static Result forbidden() {
            Result result = new Result();
            result.setCode(ResultEnum.FORBIDDEN.getCode());
            result.setMsg(ResultEnum.FORBIDDEN.getMsg());
            return result;
        }
    
        public static Result custom(int code, String msg) {
            Result result = new Result();
            result.setCode(code);
            result.setMsg(msg);
            return result;
        }
    
        public static Result custom(int code, String msg, Object data) {
            Result result = new Result();
            result.setCode(code);
            result.setMsg(msg);
            result.setData(data);
            return result;
        }
    
        public String toString() {
            return JsonUtils.toJSONString(this);
        }
    }
    
    

    jsonUtils工具类

    //
    // Source code recreated from a .class file by IntelliJ IDEA
    // (powered by Fernflower decompiler)
    //
    
    package com.hrt.framework.commons.utils;
    
    import com.alibaba.fastjson.JSON;
    import java.util.List;
    
    public final class JsonUtils {
        private JsonUtils() {
        }
    
        public static <T> T parseObject(String text, Class<T> clazz) {
            return JSON.parseObject(text, clazz);
        }
    
        public static <T> List<T> parseArray(String text, Class<T> clazz) {
            return JSON.parseArray(text, clazz);
        }
    
        public static String toJSONString(Object object) {
            return JSON.toJSONString(object);
        }
    
        public static String toJSONString(Object object, boolean prettyFormat) {
            return JSON.toJSONString(object, prettyFormat);
        }
    }
    
    

    自定义响应枚举:

    //
    // Source code recreated from a .class file by IntelliJ IDEA
    // (powered by Fernflower decompiler)
    //
    
    package com.hrt.framework.web.core.enums;
    
    public enum ResultEnum {
        SUCCESS(200, "SUCCESS"),
        FAIL(201, "FAIL"),
        ILLEGAL_ARGUMENTS(202, "ILLEGAL_ARGUMENTS"),
        MISSING_PARAMETER(203, "MISSING_PARAMETER"),
        FORBIDDEN(403, "FORBIDDEN"),
        INTERNAL_ERROR(500, "INTERNAL_ERROR");
    
        private int code;
        private String msg;
    
        private ResultEnum(int code, String msg) {
            this.code = code;
            this.msg = msg;
        }
    
        public int getCode() {
            return this.code;
        }
    
        public String getMsg() {
            return this.msg;
        }
    }
    
    

    启动类将MultipartResolver注入容器

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.context.annotation.Bean;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    import org.springframework.web.multipart.MultipartResolver;
    import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    import java.util.Collections;
    @SpringBootApplication
    public class PlatformApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(PlatformApplication.class, args);
        }
    
    	//解决跨域问题
      private CorsConfiguration buildConfig() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            // 1允许任何域名使用
            corsConfiguration.addAllowedOrigin("*");
            // 2允许任何头
            corsConfiguration.addAllowedHeader("*");
            // 3允许任何方法(post、get等)
            corsConfiguration.addAllowedMethod("*");
            return corsConfiguration;
        }
    
        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", buildConfig());
            return new CorsFilter(source);
        }
    
      @Bean
      public MultipartResolver multipartResolver(){
          CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
          multipartResolver.setMaxUploadSize(10000000);
          return multipartResolver;
      }
    
    }
    

    application.yml文件配置图片上传保存路径:

    spring:
    #  profiles:
       # active: dev
      application:
        name: fxspg-platform-server
      main:
        allow-bean-definition-overriding: true
      autoconfigure:
        exclude: org.springframework.boot.autoconfigure.web.servlet.MultipartAutoConfiguration
    server:
      port: 9001
    
    #文件上传路径
    image:
      uploadPath: D:\fxspg\image
      logo: \logo
    # 日志配置
    logging:
      config: classpath:logback-spring.xml
      path: ./logs/${spring.application.name}
      lolevel:
        root: info
    
    
    

    上传效果:
    在这里插入图片描述
    选择多张图片以后,点击开始上传。查看
    D:\fxspg\image 可以看到之前选中的多张图片已经上传。
    在这里插入图片描述
    有兴趣的老爷,可以关注我的公众号【一起收破烂】,回复【006】获取2021最新java面试资料以及简历模型120套哦~
    在这里插入图片描述

    展开全文
  • java图片上传功能的实现

    万次阅读 2017-03-06 16:34:25
    开发环境:jdk1.7,MyEclipse10 框架用的是spring。...-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.web.mu

    开发环境:jdk1.7,MyEclipse10
    框架用的是spring。用到了maven工具(maven的包百度下就可以)。

    四步完成,全部复制改参数就可以

    第一步:先在Spring中对图片进行限制

    <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 -->
    		<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    			    <property name="defaultEncoding" value="UTF-8"/> 
    <!-- 指定所上传文件的总大小不能超过500KB。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和。
    这个的大小是以字节为单位的,要多大自己算好了再设置-->
    		    <property name="maxUploadSize" value="500000"/>
    		    <!-- 最大内存大小 (10240)-->
    		    <property name="maxInMemorySize" value="40960" />
    		</bean>
    

    第二步:写jsp页面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>上传图片</title>
    </head>
    <body>
    	<form action="filesUpload" method="POST" name="xiangmu" id="xiangmu"
    		enctype="multipart/form-data">
    		<table>
    			<tr>
    				<td>身份证图片上传:</td>
    				<td><input type=file name="myfiles" id="doc"
    					onchange="showImage();">
    				</td>
    				<div id="localImag">
    					<img id="preview" width=-1 height=-1 style="diplay:none" />
    				</div>
    			</tr>
    			<tr>
    				<td>公司运营情况:</td>
    				<!-- 为了实现张图片上传,上传框这个name要都一样 -->
    				<td><input type="file" name="myfiles" id="doc1"></td>
    				<td>					
    				</td>
    			</tr>
    			<tr>
    				<td><input type="submit" value="提交" />
    				</td>
    			</tr>
    		</table>
    	</form>
    </body>
    
    </html>
    

    注意:
    多图上传,上传框的name要都一样,等于发送了一个MultipartFile[]数组。
    不仅支持上传图片,还支持多文件上传。
    form的enctype=“multipart/form-data”,这个是上传文件必须的。

    第三步:如果你要实现页面展现图片的功能,就在jsp页面添加下面的方法:

    <script type="text/javascript">
    	function showImage() {
    		var docObj = document.getElementById("doc");
    		var imgObjPreview = document.getElementById("preview");
    		if (docObj.files && docObj.files[0]) {
    			//火狐下,直接设img属性  
    			imgObjPreview.style.display = 'block';
    			imgObjPreview.style.width = '300px';
    			imgObjPreview.style.height = '120px';
    			//imgObjPreview.src = docObj.files[0].getAsDataURL();  
    			//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式  
    			imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    		} else {
    			//IE下,使用滤镜  
    			docObj.select();
    			var imgSrc = document.selection.createRange().text;
    			var localImagId = document.getElementById("localImag");
    			//必须设置初始大小  
    			localImagId.style.width = "250px";
    			localImagId.style.height = "200px";
    			//图片异常的捕捉,防止用户修改后缀来伪造图片 
    			try {
    				localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    				localImagId.filters
    						.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    			} catch (e) {
    				alert("您上传的图片格式不正确,请重新选择!");
    				return false;
    			}
    			imgObjPreview.style.display = 'none';
    			document.selection.empty();
    		}
    		return true;
    	}
    </script>
    

    注意:这个方法只能上传一张来显示,除非你设置多个div。或者:展示多个图片可以找找其他方法。

    第四步:后台接收

    @RequestMapping("/filesUpload")
    	//requestParam要写才知道是前台的那个数组
    	public String filesUpload(@RequestParam("myfiles") MultipartFile[] files,
    			HttpServletRequest request) {
    		List<String> list = new ArrayList<String>();
    		if (files != null && files.length > 0) {
    			for (int i = 0; i < files.length; i++) {
    				MultipartFile file = files[i];
    				// 保存文件
    				list = saveFile(request, file, list);
    			}
    		}
    		//写着测试,删了就可以
    		for (int i = 0; i < list.size(); i++) {
    			System.out.println("集合里面的数据" + list.get(i));
    		}
    		return "index";//跳转的页面
    	}
    
    	private List<String> saveFile(HttpServletRequest request,
    			MultipartFile file, List<String> list) {
    		// 判断文件是否为空
    		if (!file.isEmpty()) {
    			try {
    				// 保存的文件路径(如果用的是Tomcat服务器,文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
    				// )
    				String filePath = request.getSession().getServletContext()
    						.getRealPath("/")
    						+ "upload/" + file.getOriginalFilename();
    				list.add(file.getOriginalFilename());
    				File saveDir = new File(filePath);
    				if (!saveDir.getParentFile().exists())
    					saveDir.getParentFile().mkdirs();
    
    				// 转存文件
    				file.transferTo(saveDir);
    				return list;
    			} catch (Exception e) {
    				e.printStackTrace();
    			}
    		}
    		return list;
    	}
    

    注意:upload是文件夹,自己新建下再运行,免得出错。

    结束,全部复制就可以实现了。



    • 文章是个人知识点整理总结,如有错误和不足之处欢迎指正。
    • 如有疑问、或希望与笔者探讨技术问题(包括但不限于本章内容),欢迎添加笔者微信(o815441)。请备注“探讨技术问题”。欢迎交流、一起进步。
    展开全文
  • springmvc上传图片并显示图片--支持图片上传

    万次阅读 多人点赞 2015-07-13 21:44:23
    springmvc上传图片并显示图片(也能上传文件),图片上传并显示图片,采用commons-fileupload,commons-io

    实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。

    开始需要在pom.xml加入几个jar,分别是:

    		<dependency>
    			<groupId>commons-fileupload</groupId>
    			<artifactId>commons-fileupload</artifactId>
    			<version>1.3.1</version>
    		</dependency>
    		<dependency>
    			<groupId>commons-io</groupId>
    			<artifactId>commons-io</artifactId>
    			<version>2.4</version>
    		</dependency>

    接下来,在Springmvc的配置加入上传文件的配置(PS:我把springmvc的完整配置都展现出来):

    	<!--默认的mvc注解映射的支持 -->
    	<mvc:annotation-driven/>
    	<!-- 处理对静态资源的请求 -->
    	<mvc:resources location="/static/" mapping="/static/**" />
    	<!-- 扫描注解 -->
    	<context:component-scan base-package="com.ztz.springmvc.controller"/>
    	<!-- 视图解析器 -->
    	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> 
            <!-- 前缀 -->
    		<property name="prefix" value="/WEB-INF/jsp/"/>
    		<!-- 后缀 -->
    		<property name="suffix" value=".jsp"/>
    	</bean>
    	<!-- 上传文件 -->
    	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    		<property name="defaultEncoding" value="utf-8"/>
    		<!-- 最大内存大小 -->
    		<property name="maxInMemorySize" value="10240"/>
    		<!-- 最大文件大小,-1为不限制大小 -->
    		<property name="maxUploadSize" value="-1"/>
    	</bean>

    一、 单文件上传

    当然在一个表单中,需要添加enctype="multipart/form-data",一个表单有文件域,肯定也有基本的文本框,可以一次性提交,springmvc能给我们区别出来,来做不同的处理。首先看下普通的model

    package com.ztz.springmvc.model;
    
    public class Users {
    	private String name;
    	private String password;
    	//省略get set方法
    	
    	//重写toString()方便测试
    	@Override
    	public String toString() {
    		return "Users [name=" + name + ", password=" + password +  "]";
    	}
    }
    

    这个是表单的JSP页面:

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    request.setAttribute("basePath", basePath);
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>FileUpload</title>
    </head>
    <body>
    <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
    	<label>用户名:</label><input type="text" name="name"/><br/>
    	<label>密 码:</label><input type="password" name="password"/><br/>
    	<label>头 像</label><input type="file" name="file"/><br/>
    	<input type="submit" value="提  交"/>
    </form>
    </body>
    </html>
    上传成功跳转的JSP页面,并且显示出上传图片:

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    request.setAttribute("basePath", basePath);
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>头像</title>
    </head>
    <body>
    <img src="${basePath}${imagesPath}">
    </body>
    </html>

    最后是Controller:

    package com.ztz.springmvc.controller;
    
    import java.io.File;
    import java.util.UUID;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.stereotype.Controller;
    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.multipart.MultipartFile;
    
    import com.ztz.springmvc.model.Users;
    
    @Controller
    @RequestMapping("/file")
    public class FileUploadController {
    	
    	@RequestMapping(value="/upload",method=RequestMethod.POST)
    	private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile file,
    			HttpServletRequest request)throws Exception{
    		//基本表单
    		System.out.println(users.toString());
    		
    		//获得物理路径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));
    		}
    		System.out.println(path);
    		request.setAttribute("imagesPath", path);
    		return "success";
    	}
    	//因为我的JSP在WEB-INF目录下面,浏览器无法直接访问
    	@RequestMapping(value="/forward")
    	private String forward(){
    		return "index";
    	}
    }
    


    点击提交控制台输出:

    Users [name=fileupload, password=test]


    浏览器显示结果:



    二、 多图片上传

    springmvc实现多图片上传也很简单,我们把刚才的例子修改下,在加一个文件域,name的值还是相同

    <body>
    <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
    	<label>用户名:</label><input type="text" name="name"/><br/>
    	<label>密 码:</label><input type="password" name="password"/><br/>
    	<label>头 像1</label><input type="file" name="file"/><br/>
    	<label>头 像2</label><input type="file" name="file"/><br/>
    	<input type="submit" value="提  交"/>
    </form>
    </body>

    展示图片来个循环,以便显示多张图片

    <body>
    <c:forEach items="${imagesPathList}" var="image">
    	<img src="${basePath}${image}"><br/>
    </c:forEach>
    </body>

    控制层代码如下:

    package com.ztz.springmvc.controller;
    
    import java.io.File;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.UUID;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.stereotype.Controller;
    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.multipart.MultipartFile;
    
    import com.ztz.springmvc.model.Users;
    
    @Controller
    @RequestMapping("/file")
    public class FileUploadController {
    	
    	@RequestMapping(value="/upload",method=RequestMethod.POST)
    	private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile[] file,
    			HttpServletRequest request)throws Exception{
    		//基本表单
    		System.out.println(users.toString());
    		
    		//获得物理路径webapp所在路径
    		String pathRoot = request.getSession().getServletContext().getRealPath("");
    		String path="";
    		List<String> listImagePath=new ArrayList<String>();
    		for (MultipartFile mf : file) {
    			if(!mf.isEmpty()){
    				//生成uuid作为文件名称
    				String uuid = UUID.randomUUID().toString().replaceAll("-","");
    				//获得文件类型(可以判断如果不是图片,禁止上传)
    				String contentType=mf.getContentType();
    				//获得文件后缀名称
    				String imageName=contentType.substring(contentType.indexOf("/")+1);
    				path="/static/images/"+uuid+"."+imageName;
    				mf.transferTo(new File(pathRoot+path));
    				listImagePath.add(path);
    			}
    		}
    		System.out.println(path);
    		request.setAttribute("imagesPathList", listImagePath);
    		return "success";
    	}
    	//因为我的JSP在WEB-INF目录下面,浏览器无法直接访问
    	@RequestMapping(value="/forward")
    	private String forward(){
    		return "index";
    	}
    }
    




    PS:本demo地址:http://download.csdn.net/detail/zwz568017880/9043089


    展开全文
  • 由于在网上搜不到相关很全的yii2上传图片组件demo,后来还是到强大的google下面找到了相关组件。 ...但是只有前端,后面的上传代码没有具体的示例。所以本人结合该组件写了多图上传功能。 不说废话下面分享干货

    参考文章  bootstrap3 文件上传插件fileinput中文说明文档

    http://blog.csdn.net/lvshaorong/article/details/48730145

    由于在网上搜不到相关很全的yii2上传图片组件demo,后来还是到强大的google下面找到了相关组件。

    组件地址http://demos.krajee.com/widget-details/fileinput#settings

    但是只有前端,后面的上传代码没有具体的示例。所以本人结合该组件写了多图上传功能。

    不说废话下面分享干货


    后台上传代码

    <?php
    
    namespace frontend\controllers;
    
    use common\ToolBox\ToolExtend;
    use Yii;
    use yii\helpers\FileHelper;
    use yii\helpers\Html;
    use yii\helpers\Url;
    use yii\imagine\Image;
    use yii\web\Controller;
    use yii\web\UploadedFile;
    
    class UploadController extends Controller
    {
        public $enableCsrfValidation = false;//禁用Csrf验证
    
    
        /**
         * 上传图片到临时目录
         * @return string
         * @throws \yii\base\Exception
         */
        public function actionImage()
        {
            if (Yii::$app->request->isPost) {
                $res = [];
                $initialPreview = [];
                $initialPreviewConfig = [];
                $images = UploadedFile::getInstancesByName("ImgSelect");
                if (count($images) > 0) {
                    foreach ($images as $key => $image) {
                        if ($image->size > 2048 * 1024) {
                            $res = ['error' => '图片最大不可超过2M'];
                            return json_encode($res);
                        }
                        if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
                            $res = ['error' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
                            return json_encode($res);
                        }
                        $dir = '/uploads/temp/';
                        //生成唯一uuid用来保存到服务器上图片名称
                        $pickey = ToolExtend::genuuid();
                        $filename = $pickey . '.' . $image->getExtension();
    
                        //如果文件夹不存在,则新建文件夹
                        if (!file_exists(Yii::getAlias('@frontend') . '/web' . $dir)) {
                            FileHelper::createDirectory(Yii::getAlias('@frontend') . '/web' . $dir, 777);
                        }
                        $filepath = realpath(Yii::getAlias('@frontend') . '/web' . $dir) . '/';
                        $file = $filepath . $filename;
    
                        if ($image->saveAs($file)) {
                            $imgpath = $dir . $filename;
                            /*Image::thumbnail($file, 100, 100)
                                ->save($file . '_100x100.jpg', ['quality' => 80]);
    */
                            array_push($initialPreview, "<img src='" . $imgpath . "' class='file-preview-image' alt='" . $filename . "' title='" . $filename . "'>");
                            $config = [
                                'caption' => $filename,
                                'width' => '120px',
                                'url' => '/upload/delete-pic', // server delete action
                                'key' => $pickey,
                                'extra' => ['filename' => $filename]
                            ];
                            array_push($initialPreviewConfig, $config);
    
                            $res = [
                                "initialPreview" => $initialPreview,
                                "initialPreviewConfig" => $initialPreviewConfig,
                                "imgfile" => "<input name='ImageFilesPath[]' id='" . $pickey . "' type='hidden' value='" . $imgpath . "'/>"
                            ];
                        }
                    }
                }
    
                return json_encode($res);
            }
        }
    
        /**
         * 删除上传到临时目录的图片
         * @return string
         */
        public function actionDeletePic()
        {
            $error = '';
            if (Yii::$app->request->isPost) {
                $dir = '/uploads/temp/';
                $filename = yii::$app->request->post("filename");
                $filename = $dir . $filename;
                if (file_exists(Yii::getAlias('@frontend') . '/web' . $filename)) {
                    unlink(Yii::getAlias('@frontend') . '/web' . $filename);
                }
    
                if (file_exists(Yii::getAlias('@frontend') . '/web' . $filename . '_100x100.jpg')) {
                    unlink(Yii::getAlias('@frontend') . '/web' . $filename . '_100x100.jpg');
                }
            }
            return json_encode($error);
        }
    }

    生成唯一UUID代码

    <?php
    
    namespace common\ToolBox;
    
    use yii;
    use yii\base\Exception;
    
    /**
     * Class ToolExtend 自定义扩展类 公共方法在这里写
     * @package common\ToolBox
     */
    class ToolExtend
    {
    /**
         * 生成不带横杠的UUID
         * @return string
         */
        public static function genuuid(){
            return sprintf('%04x%04x%04x%04x%04x%04x%04x%04x',
                // 32 bits for "time_low"
                mt_rand(0, 0xffff), mt_rand(0, 0xffff),
    
                // 16 bits for "time_mid"
                mt_rand(0, 0xffff),
    
                // 16 bits for "time_hi_and_version",
                // four most significant bits holds version number 4
                mt_rand(0, 0x0fff) | 0x4000,
    
                // 16 bits, 8 bits for "clk_seq_hi_res",
                // 8 bits for "clk_seq_low",
                // two most significant bits holds zero and one for variant DCE1.1
                mt_rand(0, 0x3fff) | 0x8000,
    
                // 48 bits for "node"
                mt_rand(0, 0xffff), mt_rand(0, 0xffff), mt_rand(0, 0xffff)
            );
        }
    }

    基于该组件重新封装

    <?php
    namespace common\widgets\imgupload;
    
    use yii\base\Widget;
    use yii\helpers\Html;
    
    class ImgMultUpload extends Widget
    {
        //标签名称
        public $label;
    
        //初始化图片数组
        public $imgarr;
    
        //图片存储文件夹目录
        public $imagedir;
    
        private $initialPreview = [];
        private $initialPreviewConfig = [];
    
        public function init()
        {
            parent::init();
            if ($this->label === null) {
                $this->label = '上传图片';
            }
    
            if (is_array($this->imgarr) && count($this->imgarr) > 0) {
                foreach ($this->imgarr as $key => $value) {
                    $config = ['caption' => $value,
                        'width' => '120px',
                        'url' => '/upload/delete-pic', // server delete action
                        'key' => $value,
                        'extra' => ['filename' => $value]];
                    array_push($this->initialPreview, Html::img($this->imagedir . $value, [
                        'class' => 'file-preview-image',
                        'alt' => 'The Moon',
                        'title' => 'The Moon']));
                    array_push($this->initialPreviewConfig, $config);
                }
            }
        }
    
        public function run()
        {
            return $this->render('imgfiled', [
                'label' => $this->label,
                'initialPreview' => $this->initialPreview,
                'initialPreviewConfig' => $this->initialPreviewConfig
            ]);
        }
    }

    views内容

    <?php
    
    use kartik\file\FileInput;
    use yii\helpers\Url;
    
    ?>
    
    <div class="form-group">
        <label class="control-label col-lg-2">
            <?= $label ?>
        </label>
    
        <div class="col-lg-6">
            <?= FileInput::widget([
                //'model' => $model,
                //'attribute' => 'ListImgUrl',
                'name' => 'ImgSelect',
                'language' => 'zh-CN',
                'options' => ['multiple' => true, 'accept' => 'image/*'],
                'pluginOptions' => [
                    'initialPreview' => $initialPreview,
                    'initialPreviewConfig' => $initialPreviewConfig,
                    'allowedPreviewTypes' => ['image'],
                    'allowedFileExtensions' => ['jpg', 'gif', 'png'],
                    'previewFileType' => 'image',
                    'overwriteInitial' => false,
                    'browseLabel' => '选择图片',
                    'msgFilesTooMany' => "选择上传的图片数量({n}) 超过允许的最大图片数{m}!",
                    'maxFileCount' => 5,//允许上传最多的图片5张
                    'maxFileSize' => 200,//限制图片最大200kB
                    'uploadUrl' => Url::to(['/upload/image']),
                    //'uploadExtraData' => ['testid' => 'listimg'],
                    'uploadAsync' => true,//配置异步上传还是同步上传
                ],
                'pluginEvents' => [
                    'filepredelete' => "function(event, key) {
                            return (!confirm('确认要删除'));
                        }",
                    'fileuploaded' => 'function(event, data, previewId, index) {
                            $(event.currentTarget.closest("form")).append(data.response.imgfile);
                        }',
                    'filedeleted' => 'function(event, key) {
                            $(event.currentTarget.closest("form")).find("#"+key).remove();
                            return alert("图片已经删除")
                        }',
                ]
            ]); ?>
        </div>
    </div>

    在测试页面进行调用代码

    <?php
    
    /* @var $this yii\web\View */
    
    use common\widgets\imgupload\ImgMultUpload;
    use kartik\file\FileInput;
    use yii\helpers\Html;
    use yii\bootstrap\ActiveForm;
    use yii\helpers\Url;
    
    $this->title = 'test';
    
    ?>
    
    <?php $form = ActiveForm::begin([
        'layout' => 'horizontal',
        'enableAjaxValidation' => false,
        'method' => 'post',
        'options' => ['enctype' => 'multipart/form-data'],
        'fieldConfig' => [
            'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{endWrapper}",
            'horizontalCssClasses' => [
                'label' => 'col-lg-2',
                'wrapper' => 'col-lg-6',
                'error' => 'col-lg-3',
                'hint' => '',
            ],
        ]
    ]); ?>
    
    <?= ImgMultUpload::widget(['label' => '产品图片', 'imgarr' => [
        '1987acba6a8d4ea394356080f626e1ad.jpg',
        'bafc12233dc14acfb4cba448b8f0d947.jpg'
    ], 'imagedir' => '/uploads/temp/']); ?>
    <?php
    ActiveForm::end();
    ?>


    效果如下图

    封装我只是草草封装了,有兴趣的可以重新封装。

    当抛砖引玉了,有什么具体问题,欢迎在下面留言。


    展开全文
  • Android自定义动态布局—图片上传

    热门讨论 2015-06-05 17:17:00
    1.使用java代码动态布局 2.图片上传
  • 一个好用的jquery图片上传插件

    热门讨论 2012-03-08 14:04:12
    可以图片上传,在一次开发中偶遇uploadify,比swfupload还强大好用,选项也很丰富,功能也很强大,再配合ajax技术,可以把图片上传发挥到极致,我曾用它做图片上传上传后同时做缩略,以日期重命名,百张...
  • 类似于QQ空间、微信朋友圈图片上传、用GridView实现多图选择图片上传。包括服务端代码。这是本人就地取材、所以服务端代码可能有部分不相关。有兴趣的朋友可以自己看看、简洁明了的。
  • 图片上传预览,且可对图片进行编辑可对 input[type=file] 对象获取 obj.files 获取 FileList,但为只读模式,不可写。2.移动端html5文件上传 Android 端web不支持文件上传,IOS支持。 解决:微信公众号开发...
  • 关于微信jssdk多图上传,多图下载,单图上传,单图下载的实现
  • js+css实现手机端的图片上传,为了方便使用,css和js都未内联,为性能建议使用时改为外联; 如要用到pc端,直接去掉px转换为rem的js代码,修改单位即可; 因multiple在安卓手机中不兼容,所以在安卓上只能一次选中...
  • elementui图片上传与删除

    千次阅读 2018-12-12 22:24:03
    最近在看elementui的图片上传,总结一下关于图片上传以及获取删除后相应的图片列表 &amp;amp;amp;amp;amp;amp;lt;el-upload action=&amp;amp;amp;amp;amp;quot;uploadUrl&amp;amp;amp;amp;amp;quot; /...
  • 多图上传以及多图排序的方法及流程详解所用插件包打包下载CSDN地址:点这里1、选择多图上传插件:pluploader.full.min.js(此插件经过试用非常好用,比百度的webuploader好用太多,但是需要翻墙下载,为了大家方便,...
  • Laravel+Blob多图上传

    千次阅读 2017-09-13 14:07:04
    我们知道多图上传一般都附带的又即时显示功能,即上传后可以立刻看到所传图片。之前一直用的一个多图上传插件是选择图片,点击上传然后图片资源上传到服务器,然后返回存储的路径信息,最后我们点击表单的提交按钮后...
  • springboot 单个input图片上传

    千次阅读 2017-11-13 01:49:35
    最近有用到图片上传的功能,但是不能有多少个图片就写多少个标签,于是在网上找了一个js展现图片的模板,自己改造之后实现了单个input上传多个图片的功能。 1.项目是基于springboot 快速搭建springboot:...
  • vue结合element实现多图上传组件

    千次阅读 2019-08-23 15:23:52
    vue结合element实现多图上传组件 简介 多图上传在表单和富文本中营业较多。 主要依赖说明 (先安装,步骤略) { "element-ui": "2.11.1", "vue": "^2.6.10", "vue-router": "^3.0.1" } 正文 1.组件 src/...
  • plupload上传插件图片上传操作

    千次阅读 2017-08-11 08:56:18
    最近项目接触到plupload.full.min.js这个插件的使用,网上关于它具体使用很。  api可参照Plupload上传插件中文帮助文档.  带预览功能的上传操作可参照文件上传插件...涉及到图片上传,且这些图片必填...
  • 前端H5实现图片上传并预览

    万次阅读 多人点赞 2018-11-10 12:29:31
    只有给input加上multiple属性才能实现个文件同时上传。 好了,下面我们来实现一个简单的图片上传并预览的例子 &amp;lt;div class=&quot;input-file-box&quot;&amp;gt; &amp;lt;span&...
  • 本文介绍Android中动态布局添加图片,图片上传。 项目中效果: 技术点: 1.动态添加格局中的线条和添加图片的+号 2.张图片异步上传
  • ios获取本地相册,自定义相册,多图上传,仿QQ聊天选中多图上传
  • 微信小程序实现图片上传

    千次阅读 2018-08-29 17:04:57
    官方文档中的示例是单文件上传的,而且因为path值是string类型...首先在app.js文件中写入图片上传的方法 uploadimg(data) { var that = this, i = data.i ? data.i : 0, success = data.success ? data.suc...
  • H5多图上传,并实现压缩(可根据实际情况选择对多大的图片进行压缩,本例为大于512KB的进行压缩)和预览 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
  • UEditor多图上传时,由于后台上传接口返回的时间不同,会造成显示上传后的图片与选择时的图片顺序不一致的问题。 举个栗子: 多图上传时,先后选择了a.png和b.png,其中a.png大小为900k,b.png大小为5k,当上传...
  • iOS批量上传图片(多图上传

    千次阅读 2014-02-21 22:39:34
    由于iOS无法通过html表单来上传图片,因此想要上传图片,必须实现http请求,而不能像其他语言那样通过html...其实只要格式拼接正确就可以实现多图上传的功能。 .h文件实现 #import @interface PicUpload : NSObject
  • Rxjava + Retrofit2 多图上传

    千次阅读 2016-09-28 11:23:43
    本文图片上传感觉比网上找的详细很多,不信亲测项目地址:https://github.com/HarryXR/RetrofitRxjavaDemo只展示了Get请求因为post...说说多图上传 使用MultipartBody,封装多张图片以及所需参数 @POST("face") Observ
  • Ueditor 自定义多图上传路径及回显

    千次阅读 2017-03-13 17:18:34
    多图上传的路径和单图上传的路径一样,设置方法:http://blog.csdn.net/justinytsoft/article/details/52538708 回显: 下图是回显修改的地方 步骤一,这里不需要我们设置,只是说下它的上传路径在...
  • 微信小程序单图片上传专题

    千人学习 2019-04-04 14:44:36
    主要讲解了如何使用api函数wx.chooseImage和wx.uploadFile实现单图片和图片的上传。 单站图片可以相册选择或者拍照上传图片只能相册选择。 首页我们讲解了如何实现单张图片的选择或者上传。 然后重点讲解...
  • PHP百度diyUpload多图上传插件实例

    千次阅读 2017-01-11 15:50:13
    在开发过程中经常需要用到多图上传的插件,最近发现前端找的这个diyUpload就不错,于是就整理了一个实例,仅供参考!
  • 微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了...
  • layui图片上传并预览

    万次阅读 2018-04-04 10:39:17
    layui图片上传1.0更新(1)图片上传本地目录(2)删除本地页面图片(非删除本地目录文件图片)一、控制器public function upload(){ $pathName = $this-&gt;request-&gt;param('path');//图片存放的目录 ...
  • 在node-ueditor进行拓展,通过多图上传直接将图片保存到七牛云。在保存的时候通过busboy包进行文件流保存 bug: 发现多张图片上传时候,部分图片出现上传失败,或显示出得图片只有一半的情况。仔细查看代码后,觉得...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 552,069
精华内容 220,827
关键字:

多图上传