关于文件异步上传

今天要做一个图片异步上传的功能,需求是这样的

在官网让玩家提出问题反馈,只是再发聩是需要玩家上传图片作为客服审核的证据。为了保证官网的安全性,于是准备了一台图片服务器,专门存储图片。

我的思路是在页面上传文件到图片服务器,并返回图片的地址。然后再提交表单时,将图片url,保存入数据库。

1.  利用 ajaxfileupload进行上传时,是不能进行跨域操作的。

2.  所以更换为jquery.fileupload进行跨域操作,不过没有中文文档,使用时很是费劲。因为第一次上传没有反应,只有第二次的时候才会成功,让人很头疼。我对js又不是很熟,所以准备暂且放置一下。用我比较熟的服务器端的开发来完成。

3.  在本本服上传文件和信息。然后利用httpclient 向图片服务器发送请求进行保存。这个流程比较好控制。

下面是httpclient的代码

public static void main(String[] args) throws ClientProtocolException,
			IOException {
		HttpClient httpclient = new DefaultHttpClient();
		// 请求处理页面
		HttpPost httppost = new HttpPost(
				"http://localhost:8080/LogTest/test/upload");
		// 创建待处理的文件
		FileBody file = new FileBody(new File(
				"E:\\worktools\\resin-pro-3.1.13\\conf\\resin.conf"));
		// 创建待处理的表单域内容文本
		StringBody descript = new StringBody("0431.la");

		// 对请求的表单域进行填充
		MultipartEntity reqEntity = new MultipartEntity();
		reqEntity.addPart("fileName", file);
		reqEntity.addPart("descript", descript);
		// 设置请求
		httppost.setEntity(reqEntity);
		// 执行
		HttpResponse response = httpclient.execute(httppost);
		// HttpEntity resEntity = response.getEntity();
		// System.out.println(response.getStatusLine());
		if (HttpStatus.SC_OK == response.getStatusLine().getStatusCode()) {
			HttpEntity entity = response.getEntity();
			// 显示内容
			if (entity != null) {
				System.out.println(EntityUtils.toString(entity));
			}
			if (entity != null) {
				entity.consumeContent();
			}
		}
	}

明天会将jquery.fileupload的代码优化以后,再将该js代码上传。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-12-10 15:38:15

关于文件异步上传的相关文章

百度 flash html5自切换 多文件异步上传控件webuploader基本用法

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这边的效果预览: 1.文件未选择 2.文件已选择 HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file"标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮. <div id

SpringMVC + AJAX 实现多文件异步上传

转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇文章中所用到的项目,需要的朋友可以点击前面的链接查看.在这里只贴出关键代码. 首先我们要准备一个 JS 文件,即:ajaxfileupload.js,它需要用到 jQuery,所以我们还需要准备 jQuery 的库,两个文件在文末尾都有链接提供下载. JSP 关键代码: <li> <div&

文件的上传(表单上传和ajax文件异步上传)

一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <input type="submit" value="上传&q

文件上传之——用SWF插件实现文件异步上传

之前提高过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Flash. 最近一直在用MVC,所以还是以MVC举例:先来张效果图: UploadIndex2.cshtml代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&q

HTML5 文件异步上传 — h5uploader.js

原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好,比较早了.其实通过H5做异步上传已经非常简单了,通过查看文档,便可以很轻松的完成这个功能,当然,如果你不愿意查看文档自己动手的话,那么就用插件咯.h5uploader是我最近封装的HTML5上传插件,代码才白来行,使用的话也比较简单,支持文件大小,类型,progress等等功能.本篇教程,将向你展

阿里巴巴文件异步上传

/******************************************************************************** 异步上传文件,兼容IE8,火狐和谷歌可用,如果支持h5则使用h5* 实现单个多次上传不刷新* @author 柳伟伟 <[email protected]>* @version 1.6 (2016-09-27) 修整代码*********************************************************

使用FormData实现ajax文件异步上传

1.传统的web开发文件上传一般是基于form表单的文件上传,同步的方式,用户体验差,可控性也差 2.异步上传的实现 有以下方式 2.1 借助浏览器插件 一般需要安装一些类似flash的插件  这种方式 缺点:需要安装插件  优点:可控性强,性能高 2.2 这种是伪异步上传,借助表单向隐藏的iframe提交,然后通过iframe通信操作当前页面 这种方式可控行查,体验一般,见下面代码  2.3 借助html5 里的 FormData 对象,可实现进度控制,异步的上传方式,见代码 iframe方式