ajaxFileUpload实现异步上传到阿里云服务器

最新推荐文章于 2022-02-07 10:30:22 发布

HimmaQF

最新推荐文章于 2022-02-07 10:30:22 发布

阅读量2.1k

点赞数

分类专栏： JAVA 文章标签： ajaxFileUpload oss

本文链接：https://blog.csdn.net/qq_35635356/article/details/79257573

版权

JAVA 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ajaxFileUpload是一款基于jquery的ajax上传方式的文件上传插件，提供了异步上传的文件的功能，也可以支持多文件上传功能。

在OSS中，用户操作的基本数据单元是文件Object（文件）。OSS Java SDK提供了丰富的文件上传接口，供开发者调用。

step1：首先导入所需jar和相关js（博主所用）

    <script src="jquery-1.9.1.js" type="text/javascript"></script>  这里要注意先后顺序（多嘴一下）
    <script src="ajaxfileupload.js" type="text/javascript"></script>

com.springsource.org.apache.commons.fileupload-1.3.1.jar
com.springsource.org.apache.commons.io-2.4.0.jar
aliyun-sdk-oss-2.7.0

step2：因为这里使用了springmvc框架，所以需要进行上传配置（spring相关jar不做解释）

<bean id="exceptionResolver" class="com.fh.resolver.MyExceptionResolver"></bean>
	  <bean id="multipartResolver"   class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >   
		  <property name="maxUploadSize">    
	          <value>104857600</value>    
	       </property>   
	        <property name="maxInMemorySize">    
	            <value>4096</value>    
	        </property>   
	         <property name="defaultEncoding">    
	            <value>utf-8</value>    
	        </property> 
    </bean>

step3：ajaxFileUpload使用

参数说明:

1、url　　　　　　　　　　服务器上传接口地址，这个就不用说了吧。　　
2，fileElementId　　　　　 input控件的ID
3，secureuri　　　　　　　是否启用安全提交，默认为false。
4，dataType　　　　　　　服务器返回的数据类型。可以为xml,script,json,html。
5，success　　　　　　　　成功回调
6，error　　　　　　　　　失败回调
7，data 　　　　　　　　　自定义参数
8, type 　　　　　　　　　传参方式（post和get）

<body>
     <input id="fileone" type="file" name="fileone">
    <input type="button" name="file" class="file-button" value="上传文件">
<script type="text/javascript">
function upload() {
    $.ajaxFileUpload
    ({
       url: 'url', //用于文件上传的服务器端请求地址
       type:'post',
       secureuri: false, //是否需要安全协议，一般设置为false
       fileElementId: "fileone", //对应input的ID
       data:{ 携带的数据
       },
       dataType: 'json', //返回值类型一般设置为json
       success: function (data, status)  //服务器成功响应处理函数
        {
           if(data>0){
              alert("上传成功");
			  console.log(data.filePath);//可以进行文件的回显操作（在这里就不做说明）
           }else{
              alert("上传失败");
             
           }
        }
 
    })
}
</script>
</body>

step4：Oss实现上传

public class OssUtil {
	// 登录阿里云申请账号，开通oss图片存储服务； 
	// 登录控制台oss新建bucket(存储空间也叫容器)（注意命名规范，设置公共读写）； 
	// 获取key和secret 
	// 初始化一个OSSClient, OSSClient是与OSS服务交互的客户端，SDK的OSS操作都是通过OSSClient完成的。
	public static final OSSClient getOSSClient() {
		return new OSSClient("key", "secret", "域名"); 
	}

	// 通过文件名判断并获取OSS服务文件上传时文件的contentType
	public static final String getContentType(String fileName) {
		String fileExtension = fileName.substring(fileName.lastIndexOf(".") + 1);
		if ("bmp".equalsIgnoreCase(fileExtension)) {
			return "image/bmp";
		}
		if ("gif".equalsIgnoreCase(fileExtension)) {
			return "image/gif";
		}
		if (("jpeg".equalsIgnoreCase(fileExtension)) || ("jpg".equalsIgnoreCase(fileExtension))
				|| ("png".equalsIgnoreCase(fileExtension))) {
			return "image/jpeg";
		}
		if ("html".equalsIgnoreCase(fileExtension)) {
			return "text/html";
		}
		if ("txt".equalsIgnoreCase(fileExtension)) {
			return "text/plain";
		}
		if ("vsd".equalsIgnoreCase(fileExtension)) {
			return "application/vnd.visio";
		}
		if (("ppt".equalsIgnoreCase(fileExtension)) || ("pptx".equalsIgnoreCase(fileExtension))) {
			return "application/vnd.ms-powerpoint";
		}
		if (("doc".equalsIgnoreCase(fileExtension)) || ("docx".equalsIgnoreCase(fileExtension))) {
			return "application/msword";
		}
		if ("xml".equalsIgnoreCase(fileExtension)) {
			return "text/xml";
		}
		return "text/html";
	}
	// 上传文件
	public static final String uploadInfo(InputStream is, String fileName) // 上传，并返回在文件oss上的存储路径
	{
		OSSClient client = getOSSClient();
		String resultUrl = "";
			try {
				Random random = new Random(); // 定义一个随机数
				long a = System.currentTimeMillis();
				String current = String.valueOf(a);
				String randomName = random.nextInt(9000) + 1000 + current;// 产生随机数组合
				String prefix = fileName.substring(fileName.lastIndexOf(".") + 1);// 得到文件后缀
				fileName = randomName + "." + prefix;// 生成最终文件名
				ObjectMetadata metadata = new ObjectMetadata();// ObjectMetaData是用户对该object的描述
				metadata.setCacheControl("no-cache");
				metadata.setHeader("Pragma", "no-cache");
				metadata.setContentEncoding("utf-8");
				metadata.setContentType(getContentType(fileName));
				Calendar cal = Calendar.getInstance();
				int year = cal.get(1);
				int month = cal.get(2) + 1;
				String diskName = year + "/" + month + "/";
				client.putObject("存储空间的名称", diskName + fileName, is, metadata);
				resultUrl = "https://存储空间的名称.oss-cn-shenzhen.aliyuncs.com/" + diskName + fileName;
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				client.shutdown();
			}
			return resultUrl;
		}
}

step5：编写controller

	@RequestMapping(value = "/前台ajax的url", method = RequestMethod.POST)
	public void uploadfujian(@RequestParam("fileone") final CommonsMultipartFile uploadFile, final Model model,
			final HttpServletRequest request, final HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		Map<String, Object> result = new HashMap<String, Object>();
			// 调用服务处理文件上传逻辑
			try {
				int length = uploadFile.getBytes().length;
				if ((length / 1000) > 5120) {
					response.getWriter().println("{'info':'上传失败，大小超出限制！'}");
					return;
				}
				if (length > 0) {
					String FileName = uploadFile.getOriginalFilename();// 获取原wenjia名称
					InputStream in = uploadFile.getInputStream();// 转成流文件
					String returnUrl = OssUtil.uploadInfo(in, FileName);
					result.put("filePath", returnUrl);
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		String json = new Gson().toJson(result, new TypeToken<Map<String, Object>>() {
		}.getType());
		response.getWriter().print(json);
	}

HimmaQF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajaxFileUpload实现异步上传到阿里云服务器

ajaxFileUpload是一款基于jquery的ajax上传方式的文件上传插件，提供了异步上传的文件的功能，也可以支持多文件上传功能。在OSS中，用户操作的基本数据单元是文件Object（文件）。OSS Java SDK提供了丰富的文件上传接口，供开发者调用。step1：首先导入所需jar和相关js（博主所用） &lt;script src="jquery-1.9.1.js" type=...
复制链接

扫一扫