jquery如何将页面生成的图片上传到服务器

File Upload组件啊，是同步还是异步呢

html部分：

<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">

文件引入：

<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>

HTML部分：

<div id="demo"> <div id="as" ></div></div>

JS部分：

<script type="text/javascript">

/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯* 其他参数同WebUploader*/

$('#as').diyUpload({

url:'server/fileupload.php',

success:function( data ) {

console.info( data ) },

error:function( err ) {

console.info( err )

},

buttonText : '选择文件',chunked:true,// 分片大小

chunkSize:512 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节)

fileNumLimit:50,

fileSizeLimit:500000 * 1024,

fileSingleSizeLimit:50000 * 1024,

accept: {}})

</script>

在java中要实现异步上传要提前做好准备，对于文件上传，浏览器在上传的过程中是将文件以流的形式提交到服务器端的，如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦，所以一般选择采用apache的开源工具common-fileupload这个文件上传组件。

这个common-fileupload上传组件的jar包可以去apache官网上面下载，也可以在struts的lib文件夹下面找到，struts上传的功能就是基于这个实现的。

common-fileupload是依赖于common-io这个包的，所以还需要下载这个包。剩下的就是js文件的导入了，我导入了以下文件：

<script type="text/javascript" src="lib/Js/jquery.js"></script>

<script ltype="text/javascript" src="/js/ajaxfileupload.js"></script>

在页面中的写法：

div class="controls"><span class="btn green fileinput-button"><i class="icon-plus icon-white"></i>

<span>上传照片</span>

<input id="fileToUpload" name="myfiles" type="file" onchange="upload()" title="上传" /></span>

</div>function upload(){

$.ajaxFileUpload

(

{

url:'<%=basePath%>sysperson/uploadpic',

secureuri:false,

fileElementId:'fileToUpload',

dataType: 'text',

success: function (data, status)

{

document.all.mypic.src="<%=basePath%>uploads/" + data

document.all.picpath.value = data

},error : function(data, status, e) {

alert(e)

}

})

}

不太苟同楼上的做法，这种不光耗费服务器资源，也耗费数据库的资源。如果是类似腾讯这种人气的网站。就知道问题了。

说下我在实际中的做法吧。当然我的客户人气没有那么高。每年顶多几万人。

比如有个图像上传预览。也是要及时预览并上传到服务器端。我用的是uploady上传插件。

第一张图片上传后以用户名命名.JPG保存。第二次上传就判断当前用户的photo【这是上传图片保存在数据库中】是否存在，如果存在就以用户名#TEMP#.JPG【如果当前用户的photo已是#TEMP#.JPG结尾则以用户名.JPG】保存。如果不存在就依然以用户名.JPG保存。如此互斥。这样只要你不覆盖用户点击保存前你的那张图片，数据库也不会有变动。预览的图片也就永远只有一张。如果你要清理这1万张预览图那也是相当容易的【比如你可以将预览图放在一个临时文件夹中，做个定时任务，一个星期清理一次也差不多了，顶多也就上万张，平时估计几百张就不错了，而实际用户的图片也是以年份/省市/等单独存放，避免一个文件夹过大】。本人项目中的用法，如有问题，请赐教。

---