juery多图片上传 + 上传七牛 + 兼容ie9

最新推荐文章于 2021-03-12 23:42:40 发布

蛋蛋的忧伤ss

最新推荐文章于 2021-03-12 23:42:40 发布

阅读量7.6k

点赞数 1

本文链接：https://blog.csdn.net/dongchengxuyuan/article/details/81234582

版权

后台获取七牛token代码：

maven 配置

<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.11</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.3.1</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>happy-dns-java</artifactId>
<version>0.1.4</version>
<scope>compile</scope>
</dependency>

获取token接口

/**
   * 七牛获取token
   */
   @RequestMapping(value = "/getQinuToken", method = RequestMethod.POST)
   @ResponseBody
   public ApiResult<String> getQinuToken(@RequestBody Map<String , Object> param){
       if(null == param.get("key") || StringUtils.isBlank((String)param.get("key"))) {
           return ApiResult.error(getMessage("qinuKeyNotBlank.error"));
       }
       return ApiResult.success(SimpleUpload.getUpToken((String)param.get("key")));
   };

获取token 工具类

package com.qkkj.operatemgmt.framework.util;

import java.io.File;

import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;

/**
* 七牛 java sdk 简单上传，覆盖上传，文件上传
* @author wangfudong
*/
public class SimpleUpload {

   //设置好账号的ACCESS_KEY
   private static final String ACCESS_KEY = "..";

   //设置好账号的SECRET_KEY
   private static final String SECRET_KEY = "..";

   //上传凭证有效时长24小时，单位：秒
   private static long expireSeconds = 86400;

   //要上传的空间
private static String BUCKET_NAME = "...";

/**
* 获取凭证
* @param qkkj-file 空间名称
* @param key 覆盖上传
* @return
*/
public static String getUpToken(String key) {
   Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
return auth.uploadToken(BUCKET_NAME, key, expireSeconds, null);
}

/**
* 获取凭证
* @param bucketName 空间名称
* @param key 覆盖上传
* @return
*/
public static String getUpToken(String bucketName,String key) {
   Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
return auth.uploadToken(bucketName, key, expireSeconds, null);
}

/**
* 上传方法1
* @param filePath 文件路径（也可以是字节数组、或者File对象）
* @param key 上传到七牛上的文件的名称（同一个空间下，名称【key】是唯一的）
* @param bucketName 空间名称（这里是为了获取上传凭证）
*/
public static void upload(String filePath, String key, String bucketName) {
try {
// 调用put方法上传
   Configuration config = new Configuration();
UploadManager uploadManager = new UploadManager(config);
Response res = uploadManager.put(filePath, key, getUpToken(bucketName,key));
// 打印返回的信息
System.out.println(res.bodyString());
} catch (QiniuException e) {
Response r = e.response;
// 请求失败时打印的异常的信息
System.out.println(r.toString());
try {
// 响应的文本信息
System.out.println(r.bodyString());
} catch (QiniuException qe) {
// ignore
}
}
}

/**
* 上传方法2
* @param file 文件
* @param key 上传到七牛上的文件的名称（同一个空间下，名称【key】是唯一的）
* @param bucketName 空间名称（这里是为了获取上传凭证）
*/
public static void upload(File file, String key, String bucketName) {
try {
// 调用put方法上传
   Configuration config = new Configuration();
UploadManager uploadManager = new UploadManager(config);
Response res = uploadManager.put(file, key, getUpToken(bucketName,key));
// 打印返回的信息
System.out.println(res.bodyString());
} catch (QiniuException e) {
Response r = e.response;
// 请求失败时打印的异常的信息
System.out.println(r.toString());
try {
// 响应的文本信息
System.out.println(r.bodyString());
} catch (QiniuException qe) {
// ignore
}
}
}

/**
* 上传方法3 覆盖上传
* @param path
* 上传文件路径
* @param bucketName
* 空间名
* @param key
* 文件名
*/
public void overrideUpload(String path, String key, String bucketName) {
try {
String token = getUpToken(bucketName, key);//获取 token
Configuration config = new Configuration();
UploadManager uploadManager = new UploadManager(config);
Response response = uploadManager.put(path, key, token);//执行上传，通过token来识别该上传是“覆盖上传”
System.out.println(response.toString());
} catch (QiniuException e) {
System.out.println(e.response.statusCode);
e.printStackTrace();
}
}
}

js代码

//点击多图片上传

//保存

}, 3000);
}

//删除图片事件
function delCurrentPictrue(object){
   //获取图片id
   var aimgId = $(object).attr("ID");
   //获取当前图片以及对应表单的通用uuid = formId
   var picuuid = aimgId.substr(4,aimgId.length);

   //删除iframe 表单div
   var divIframe = "div"+picuuid;
   $("#"+divIframe).remove();

   //删除图片
   $(object).remove();
}

//验证上传图片路径有效性，要解决跨域问题js

jquery.xdomainrequest.min.js 网上找的

页面html:

<div id="preview"></div>
<button type="button" class="btn btn-primary" οnclick="uploadPictures();">批量上传图片</button>

</div>