js批量上传图片
A. 如何用js脚本在html中批量加入图片
这个用jQuery实现很简单的，代码如下：
for(var i =1;i<=75;i++)
{
$("#divContainer").append("<div> <input type=\"radio\" name=\"face\" /> <img src=\"images/QQ/" + i + ".gif\" />");//divContainer为添加容器div的id
}
B. 我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
WebUploader项目，符合你的要求。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重复创建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上传成功，给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上传失败，显示上传出错。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重复创建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
//完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
更多细节，请查看js源码。
C. 求js多张图片上传，可预览右上角带删除图标的代码
可以用dropzone.js试试，官网： http://www.dropzonejs.com/，你看看就知道了。上面有一个demo，你试试
D. js 前端上传多张图片
可以用webuploader插件，上传成功后，服务端返回图片地址，客户端<img>显示图片
X关闭按钮这个得自己用css样式控制，点击X后，服务端删除图片，然后前端移除该X掉的图片
E. jsp如何实现多图片一起上传
能
导包 com.jspsmart.upload.SmartUpload
mySmartUpload.initialize(pageContext);
mySmartUpload.upload();
for(int i=0;i<mySmartUpload.getFiles().getCount();i++){
com.jspsmart.upload.File myFile=mySmartUpload.getFiles().getFiles().getFile(i);
if(!myFile.isMissing()){
myFile.saveAs("c:\\"+myFile.getFileName(),mySmartUpload.SAVE_PHYSICAL);
}
}
基本上就是这意思了！ 全是手写的，不知道有没有少写什么字母
然后页面取的FILE 再不会，去查，查了也不会再说
F. 你好，我用webuploader.html5only.min.js实现批量图片上传，我该怎么在action中获取上传的那些文件呢
1.1 分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
1.2 预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
1.3 多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
1.4 HTML5 & FLASH
兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
1.5 MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
1.6 易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
2、引入资源
2.1 下载包内容
├── Uploader.swf // SWF文件，当使用Flash运行时需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash实现的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5实现的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除图片处理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下载Git项目包。
// SWF文件，当使用Flash运行时需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除图片处理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包借助了Grunt工具来实现
2.3.1 环境依赖
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 编译代码
1.克隆 webuploader git仓库，git clone https://github.com/fex-team/webuploader.git。
2.安装node依赖，npm install。
3.执行grunt dist，此动作会在dist目录下面创建合并版本的js, 包括通过uglify压缩的min版本。
2.3.3 配置
打开webuploader仓库根目录下面的Gruntfile.js文件, 代码合并有buildtask来完成。找到build配置项。
Gruntfile.js已经配置了一个自定义合并的demo. 打包只支持HTML5的版本
// 自己配置的实例
// glob语法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}
3、angular指令——<web-uploader>
3.1 指令功能
添加一个上传文件按钮，可以自行配置上传文件的类型和过滤规则，且在弹出的模态框中进行操作，支持连续上传，分类选择上传
3.2 使用说明
这里只是使用说明，可能会加一些注意事项，具体参数或者变量说明请参看后面
3.2.1 页面添加一个指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上传类型和过滤规则
上传类型
type有四种类型，分别为
image：图片
video：音视频
flash：flash
file：办公文档，压缩文件等等
过滤规则
accept有四个对象属性，属性中包含标题、允许文件后缀、允许的mimetype
3.2.3 指令中绑定弹出模态框的事件
web-uploader这个指令中其实只做了一件事，给元素本身绑定弹出模态框的事件，具体上传文件是在模态框中完成的
3.2.4 初始化uploader类，配置相关属性
在模态框控制器中用到了$timeout
$timeout(function(){
//这里是上传配置代码
},0)
因为配置uploader时需要事先准备好dom元素，angular打开模态框是异步而javaScript是单线程，所以实际上在执行模态框控制器中的代码时，模态框并没有打开，也就是dom并没有加载完成，这会导致WebUploader报a.runningtime is not a function...的错误
3.3 指令详细说明
3.3.1 父级controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允许上传的类型 图片/音视频/flash/文件
$scope.accept = {
//图片
image: {
title : 'Images',//标题
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允许上传文件的后缀
mimeTypes : 'image/*'//允许的mimetype
},
//音视频
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//办公文档，压缩文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
G. 3-22 怎样批量上传图片怎样自选择保存的文件夹
上传单个图片自动添加浮水印的并保存到固定目录的功能基本完成，但这样是达不到实际应用要求。实际上还要实现批量上传图片，还要用户能选择加了水印图片的保存路径。批量上传大多的实现思路是按一下添加一条input file域给你输入多一条图片源路径，但BOSS黄想点浏览按钮，然后用鼠标一拉就框几个图片文件一次过添加上传；而选择保存路径就只找到手动填入路径地址，而没有按浏览再选文件夹的方便控件。总之用户要求越使用起来方便，程序员的工作就越复杂麻烦。现正还在找代码，先实现简单的，再查查看复杂的那种能不能实现。如果PHP和JS之类的确实没这样的功能我也不能凭空变出来啊，这又不是编Windows你地用得爽，我烦死啊~~
H. 用java完成图片多张批量上传的功能，还有就是后台的应该怎么处理上传的照片。
环境准备
1． 下载并安装Tomcat（已经有很多关于Tomcat安装以及使用的文章，在这里不再介绍）；
2． 下载File upload的jar包commons-fileupload-1.0-beta-1.jar,并将该文件拷贝到{$TOMCAT}/common/lib目录下（其中{$TOMCAT}为Tomcat的安装目录）；
3． 由于Fileupload子项目同时要用到另外一个项目commons-Beanutils，所以必须下载Beanutils，并将解压后的文件commons-beanutils.jar拷贝到{$TOMCAT}/common/lib目录下。
开发文件上传页面
文件上传的界面如图1所示。为了增加效率我们设计了三个文件域，同时上传三个文件。
图1 文件上传界面
页面的HTML代码如下：
<html>
<head>
<title>文件上传演示</title>
</head>
<body bgcolor=“#FFFFFF”text=“#000000” leftmargin=“0”topmargin=“40”marginwidth=“0” marginheight=“0”>
<center>
<h1>文件上传演示</h1>
<form name=“uploadform”method=“POST” action=“save.jsp”ENCTYPE=“multipart/form-data”>
<table border=“1”width=“450”cellpadding=“4” cellspacing=“2”bordercolor=“#9BD7FF”>
<tr><td width=“100%”colspan=“2”>
文件1：<input name=“file1”size=“40”type=“file”>
</td></tr>
<tr><td width=“100%”colspan=“2”>
文件2：<input name=“file2”size=“40”type=“file”>
</td></tr>
<tr><td width=“100%”colspan=“2”>
文件3：<input name=“file3”size=“40”type=“file”>
</td></tr>
</table>
<br/><br/>
<table>
<tr><td align=“center”><input name=“upload” type=“submit”value=“开始上传”/></td></tr>
</table>
</form>
</center>
</body>
</html>
代码中要特别注意的是黑体处。必须保证表单的ENCTYPE属性值为multipart/form-data，这样浏览器才能正确执行上传文件的操作。
处理上传文件信息
由于本文主要是讲述如何使用Commons-fileupload，所以为了便于修改、调试，上传文件的保存使用一个JSP文件来进行处理。我们将浏览器上传来的所有文件保存在一个指定目录下并在页面上显示所有上传文件的详细信息。保存页面处理结果见图2所示。
图2 保存页面
下面来看看save.jsp的代码:
<%
/**
* 演示文件上传的处理
* @author <a href=“mailto:[email protected]”>Winter Lau</a>
* @version $Id: save.jsp,v 1.00 2003/03/01 10:10:15
*/
%>
<%@ page language=“java”contentType=“text/html;charset=GBK”%>
<%@ page import=“java.util.*”%>
<%@ page import=“org.apache.commons.fileupload.*”%>
<html>
<head>
<title>保存上传文件</title>
</head>
<%
String msg = “”;
FileUpload fu = new FileUpload();
// 设置允许用户上传文件大小,单位:字节
fu.setSizeMax(10000000);
// maximum size that will be stored in memory?
// 设置最多只允许在内存中存储的数据,单位:字节
fu.setSizeThreshold(4096);
// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录
fu.setRepositoryPath(“C:\\TEMP”);
//开始读取上传信息
List fileItems = fu.parseRequest(request);
%>
<body bgcolor=“#FFFFFF”text=“#000000” leftmargin=“0”topmargin=“40”marginwidth=“0” marginheight=“0”>
<font size=“6”color=“blue”>文件列表：</font>
<center>
<table cellpadding=0 cellspacing=1 border=1 width=“100%”>
<tr>
<td bgcolor=“#008080”>文件名</td>
<td bgcolor=“#008080”>大小</td>
</tr>
<%
// 依次处理每个上传的文件
Iterator iter = fileItems.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
//忽略其他不是文件域的所有表单信息
if (!item.isFormField()) {
String name = item.getName();
long size = item.getSize();
if((name==null||name.equals(“”)) && size==0)
continue;
%>
<tr>
<td><%=item.getName()%></td>
<td><%=item.getSize()%></td>
</tr>
<%
//保存上传的文件到指定的目录
name = name.replace(‘:’,‘_’);
name = name.replace(‘\\’,‘_’);
item.write(“F:\\”+ name);
}
}
%>
</table>
<br/><br/>
<a href=“upload.html”>返回上传页面</a>
</center>
</body>
</html>
在这个文件中需要注意的是FileUpload对象的一些参数值的意义，如下面代码所示的三个参数sizeMax、sizeThreshold、repositoryPath：
FileUpload fu = new FileUpload();
// 设置允许用户上传文件大小,单位:字节
fu.setSizeMax(10000000);
// maximum size that will be stored in memory?
// 设置最多只允许在内存中存储的数据,单位:字节
fu.setSizeThreshold(4096);
// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录
fu.setRepositoryPath(“C:\\TEMP”);
这3个参数的意义分别为：
SizeMax 用来设置上传文件大小的最大值，一旦用户上传的文件大小超过该值时将会抛出一个FileUploadException异常，提示文件太大；
SizeThreshold 设置内存中缓冲区的大小，一旦文件的大小超过该值的时候，程序会自动将其它数据存放在repositoryPath指定的目录下作为缓冲。合理设置该参数的值可以保证服务器稳定高效的运行；
RepositoryPath 指定缓冲区目录。
使用注意事项
从实际应用的结果来看该模块能够稳定高效的工作。其中参数SizeThreshold的值至关重要，设置太大会占用过多的内存，设置太小会频繁使用硬盘作为缓冲以致牺牲性能。因此，设置该值时要根据用户上传文件大小分布情况来设定。例如大部分文件大小集中在100KB左右，则可以使用100KB作为该参数的值，当然了再大就不合适了。使用commons-fileupload来处理HTTP文件上传的功能模块很小，但是值得研究的东西很多。
I. <input type="file">批量上传图片时怎么按照选择图片的顺序上传
你确定吗？
你服务器端如何处理多张图片上传的？用什么循环？foreach？
用foreach就会出问题，你可以用var_mp($_FILES)来看看结果
要保证顺序正确，用下标来获取上传的文件