fileupload上传预览
① ASP.NET上传图片。上传图片前想先在窗口中生成图片的预览，最后再决定是否上传。请高手提供下思路。
上传之前预览的是本地图象！
也就是说，img的路径设为file:///C:/xx.jpg，而上传后的图片是网络图片，也就是说路径不再是本地了！技术的难点在就这于如何取出图片的长宽，并安比例显示，这种情况下是有一定的难度的。否则是很容易的！
② fileupload 预览
上传图片前预览
上传预览我们可以这么写 <script language="javascript">
function test(){
document.all.showimg.src=document.all.file1.value;
}
</script>
<img id="showimg">
<input type="file" id="file1" onchange="test()">保存为html文件,运行，一切正常。
当我们把上面的代码原封不动的拷贝到aspx文件中,运行毫无反应，
原因在于 对安全的考虑限制image对本地文件的访问(即使你在
aspx应用程序中用一个html页面替换aspx页面也无济于事.)
google一下能用滤镜的方式解决此问题.
在要显示图片的地方加上这段： <div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px">sizingMethod：有三个选项
crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界
其中有一个src属性是指向图片路径的(必选的);
可以试一下 <script language="javascript">
function ShowImage(path){
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
}
</script>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<INPUT style="Z-INDEX: 101; LEFT: 232px; POSITION: absolute; TOP: 272px" type="file" onchange="ShowImage(this.value)">
<div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px">
</form>
</body>浏览图片没问题，可是浏览小图Div会小，浏览大图可能会占据整个页面,我们希望以固定的大小显示所有的图片
可以使用他的scale属性.可是这个属性有个问题，浏览大图时，他会缩小原图，浏览小图时就惨了，他会放大小图，
使小图模糊不清。
我们添加个方法改变这种情况。 function setImg(o)
{
var width_img;
var height_img;
o.style.visibility = "visible";
width_img=o.offsetWidth;
height_img=o.offsetHeight;
var width=274; //预定义宽
var height=100; //预定义高
var ratW; //宽的缩小比例
var ratH; //高的缩小比例
var rat; //实际使用的缩小比例
if(width_img<width && height_img<height)
{
//如果比预定义的宽高小，原图显示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
return;
}else{
//如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
}
ratH=height/height_img;
ratW=width/width_img;
if(ratH<ratW) //选择最小的作为实际的缩小比例
rat=ratH;
else
rat=ratW;
width_img=width_img * rat;
height_img=height_img * rat;
o.style.width=width_img;
o.style.height=height_img;
}修改ShowImage方法 function ShowImage(path){
//处理前是原图，先将其隐藏，
document.all.divShow.style.visibility = "hidden";
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
//过一小会获取div的宽高.
setTimeout("setImg(document.all.divShow)",100);
}
以上在IE7中测试通过.
③ jquery file upload怎么使用
使用方法：
1. 需要加载的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代码：
?
1
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
3. js代码：
?
12345678910
$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text(file.name).appendTo(document.body);});}});});
3.1 显示上传进度条：
?
123456789
$('#fileupload').fileupload({progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .bar').css('width',progress + '%');}});
3.2 需要一个<div>容器用来显示进：
?
123
<div id="progress"><div class="bar" style="width: 0%;"></div></div>
4. API
4.1 Initialization：
在上传按钮上调用fileupload()方法;
示例：
$('#fileupload').fileupload();
4.2 Options :
1: url：请求发送的目标url
Type: string
Example: '/path/to/upload/handler.json'
2.Type: 文件上传HTTP请求方式，可以选择“POST”，“PUT”或者"PATCH",
默认"POST"
Type: string
Example: 'PUT'
3. dataType:希望从服务器返回的数据类型，默认"json"
Type: string
Example: 'json'
4. autoUpload:默认情况下，只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。
Type: boolean
Default: true
5. acceptFileTypes：允许上传的的文件类型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上传文件大小
Example: 999000 (999KB) //单位：B
7. minFileSize:最小上传文件大小
Example: 100000 (100KB) //单位：B
8.previewMaxWidth : 图片预览区域最大宽度
Example: 100 //单位：px
4.3 Callback Options:
使用方法一：函数属性
实例：
?
123456789101112
$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});
使用方法二：绑定事件监听函数
实例：
?
123
$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});
每个事件名称都添加前缀：”fileupload”;
注意推荐使用第二种方法。
常用的回调函数：
1. add: 当文件被添加到上传组件时被触发
?
1
$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});
或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
2. processalways: 当一个单独的文件处理队列结束（完成或失败时）触发
3. progressall: 全局上传处理事件的回调函数
Example:
?
1234567
$('#fileupload').on('fileuploadprogressall', function (e, data) { //进度条显示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});
4. fail : 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发。
5. done : 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发。
6. always : 上传请求结束时（成功，错误或者中止）都会被触发。
④ spring mvc word文件上传之后可预览的实现方法或者步骤
你好！
springmvc文件上传
1.加入jar包：
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
lperson.java中加属性，实现get ,set方法
private String photoPath;
2.创建WebRoot/upload目录，存放上传的文件
1 <sf:form id="p" action="saveOrUpdate"
2 method="post"
3 modelAttribute="person"
4 enctype="multipart/form-data">
5
6 <sf:hidden path="id"/>
7 name: <sf:input path="name"/><br>
8 age: <sf:input path="age"/><br>
9 photo: <input type="file" name="photo"/><br>
上面第9行文件上传框，不能和实体对象属性同名，类型不同
controller配置
1 12、文件上传功能实现 配置文件上传解析器
2 @RequestMapping(value={"/saveOrUpdate"},method=RequestMethod.POST)
3 public String saveOrUpdate(Person p,
4 @RequestParam("photo") MultipartFile file,
5 HttpServletRequest request
6 ) throws IOException{
7 if(!file.isEmpty()){
8 ServletContext sc = request.getSession().getServletContext();
9 String dir = sc.getRealPath(“/upload”); //设定文件保存的目录
10
11 String filename = file.getOriginalFilename(); //得到上传时的文件名
12 FileUtils.writeByteArrayToFile(new File(dir,filename), file.getBytes());
13
14 p.setPhotoPath(“/upload/”+filename); //设置图片所在路径
15
16 System.out.println("upload over. "+ filename);
17 }
18 ps.saveOrUpdate(p);
19 return "redirect:/person/list.action"; //重定向
20 }
3.文件上传功能实现 spring-mvc.xml 配置文件上传解析器
1 <!-- 文件上传解析器 id 必须为multipartResolver -->
2 <bean id="multipartResolver"
3 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
4 <property name="maxUploadSize" value=“10485760"/>
5 </bean>
6
7 maxUploadSize以字节为单位：10485760 =10M id名称必须这样写
1 映射资源目录
2 <mvc:resources location="/upload/" mapping="/upload/**"/>
随即文件名常用的三种方式：
文件上传功能（增强：防止文件重名覆盖）
fileName = UUID.randomUUID().toString() + extName;
fileName = System.nanoTime() + extName;
fileName = System.currentTimeMillis() + extName;
1 if(!file.isEmpty()){
2 ServletContext sc = request.getSession().getServletContext();
3 String dir = sc.getRealPath("/upload");
4 String filename = file.getOriginalFilename();
5
6
7 long _lTime = System.nanoTime();
8 String _ext = filename.substring(filename.lastIndexOf("."));
9 filename = _lTime + _ext;
10
11 FileUtils.writeByteArrayToFile(new File(dir,filename), file.getBytes());
12
13 p.setPhotoPath("/upload/"+filename);
14
15 System.out.println("upload over. "+ filename);
16 }
图片显示 personList.jsp
1 <td><img src="${pageContext.request.contextPath}${p.photoPath}">${p.photoPath}</td>