Extjs图片上传显示预览
2013-12-07 12:59
393 查看
1.是当文本框内容发生改变的时候就将图片上传到服务器(如果图片小,用户是感觉不到你已经做了上传操作的。)
2.当服务器接受到这个图片的时候,将其放入到一个临时文件夹中并返回给前台一个图片路径(图片流也可以)。
3.Ajax请求会有一个相应,在服务器端成功接受到上传的图片后,返回给Ajax一个Reponse,这个Reponse里包含一个图片路径。
4.ExtJS在前台获取success里的responseText之后(也就是图片路径)将默认图片的src指向从后台反馈回来的图片路径。
现在图片就会显示出来
流程是:
用户选择图片-->
触发文本框改变事件--->
在事件中通过AJAX将图片上传给服务器--->
服务器将图片名称修改为UUID以免重复,并将此图片的路径返回给前台--->
前台AJAX请求的回调函数中获取responseText,也就是图片路径--->
设置默认图片的src为responseText---->
用户重新选择的时候(例如用户不喜欢这张图)--->
在文本框改变事件中通过AJAX将图片上传(包括先前上传的图片名称)--->
后台根据参数先删除临时图片--->
重复以上的步骤直到用户确定
需要注意的问题:
1.当用户改变了图片之后,需要把上一次的临时图片文件删除掉,以免出现垃圾图片过多。
2.每次上传图片的时候要在后面跟上一个随机参数(因为如果请求路径和参数相同,浏览器不会再继续发送请求)。通常情况下使用new Date()()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()()
3.图片太大的话,效果不是很好。
4.当用户点击确定后,将临时文件里的图片放置到你的正式图片存放目录下即可。
5.图片上传到后台使用UUID改名字,否则可能有重复
2.当服务器接受到这个图片的时候,将其放入到一个临时文件夹中并返回给前台一个图片路径(图片流也可以)。
3.Ajax请求会有一个相应,在服务器端成功接受到上传的图片后,返回给Ajax一个Reponse,这个Reponse里包含一个图片路径。
4.ExtJS在前台获取success里的responseText之后(也就是图片路径)将默认图片的src指向从后台反馈回来的图片路径。
现在图片就会显示出来
流程是:
用户选择图片-->
触发文本框改变事件--->
在事件中通过AJAX将图片上传给服务器--->
服务器将图片名称修改为UUID以免重复,并将此图片的路径返回给前台--->
前台AJAX请求的回调函数中获取responseText,也就是图片路径--->
设置默认图片的src为responseText---->
用户重新选择的时候(例如用户不喜欢这张图)--->
在文本框改变事件中通过AJAX将图片上传(包括先前上传的图片名称)--->
后台根据参数先删除临时图片--->
重复以上的步骤直到用户确定
需要注意的问题:
1.当用户改变了图片之后,需要把上一次的临时图片文件删除掉,以免出现垃圾图片过多。
2.每次上传图片的时候要在后面跟上一个随机参数(因为如果请求路径和参数相同,浏览器不会再继续发送请求)。通常情况下使用new Date()()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()()
3.图片太大的话,效果不是很好。
4.当用户点击确定后,将临时文件里的图片放置到你的正式图片存放目录下即可。
5.图片上传到后台使用UUID改名字,否则可能有重复
相关文章推荐
- 二进制流上传图片,预览,读取显示
- 上传图片显示预览js代码
- 上传图片预览设置src不显示
- Extjs 表单 显示图片 + 上传
- Extjs6.2 Form上传图片之前预览
- angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示
- 基于Bootstrap的多图片(文件也可以)上传、预览、删除、缩放、进度...显示
- asp.net 图片批量上传预览,在Silverlight页面中读取并滚动显示
- ExtJS图片上传预览
- 使用extjs4.2 实现图片的上传并预览
- 编辑图片时,能够实时显示上传的图片(预览)
- input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决
- SSH整合+Extjs模拟上传图片并实现预览
- ASP.NET MVC实现图片上传、图片预览显示
- Extjs formPanel 显示图片 + 上传
- uploadify上传完图片后,显示预览图
- extjs上传图片预览
- ASP.NET上传图片时显示预览
- Extjs4 图片上传 预览
- jQuery + ashx 实现图片按比例预览、异步上传及显示