上传图片预览思路问题

问题描述

分一共就9分,系统提示只能5分,对不住大牛们了啊。 小弟最近在做上传文件预览功能,使用技术为struts2,遇到的问题如下:1、背景:维修报告有多个维修图片,维修图片在保存维修报告主信息时可以预览,维修图片保存的路径为--维修报告ID / phone / 文件名(时间戳文件名)2、需求:用户需要在保存维修报告主信息之前预览已上传图片。3、自己的解决方式以及遇到问题: 3.1、 方式:用户保存主信息前,不允许用户上传图片,用户修改维修报告主信息的时候,可以上传图片,系统将图片保存到服务器后,可以预览。 遇到问题:缺点是不能一并保存。 3.2、 方式:用户添加图片后,保存在临时文件夹中,等待用户保存维修报告主信息后,将临时文件夹中的图片文件移动到 上面背景中指定的目录中或者将临时文件夹的名称修改为 维修报告的ID。 遇到问题:如果用户突然关闭浏览器或者人为无法控制的故障原因,系统针对临时图片文件的处理问题;如果临时文件夹为同一个名字,那么就涉及到多个用户同时操作一个文件夹的并发额外难题,如果临时文件夹为不同名字,我改如何处理图片文件的清理和修改文件夹名字呢? 3.3、 方式:利用jquery预览图片。 遇到问题:由于现在主流浏览器由于出去安全性考虑,不能通过jquery得到file控件的文件的全路径,所以此种方式,按照网上找的很难大都很难兼容。4、大牛们帮忙看看小弟的问题啊。谢谢。 问题补充:有更好的方式或者更完善的方式么?

解决方案

这个问题经常会遇到,可以这样:1、做一个临时维修报告表,将用户提交的数据保存到这张表 且 图片和其关联2、当用户确认提交时,拷贝到主表3、当用户取消/关闭浏览器(此时数据丢了):3.1、使用cookie保存上次编辑的ID3.2、定期删除临时表的数据(比如1个月)

时间: 2024-09-20 21:20:55

上传图片预览思路问题的相关文章

JS HTML5拖拽上传图片预览_javascript技巧

1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

input file上传图片预览

下载地址http://download.csdn.net/detail/cometwo/9383602 兄弟文章:http://blog.csdn.net/libin_1/article/details/50916704 input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的非常非常非常非常非常非常简单! 点击红框是加载显示图片,X号删除,蓝框是自动在后面添加添加图片框,所有的都是原创,代码其实可以更加精简,看终结版文件 <!DOCTYPE h

js兼容火狐显示上传图片预览效果的方法

  本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-

前端-关于上传图片预览的时候,图片尺寸不统一,你们都是给客户怎么样显示的呢?

问题描述 关于上传图片预览的时候,图片尺寸不统一,你们都是给客户怎么样显示的呢? 无图片时: 有图片时,宽度100%,但是高度过小: 这种情况下怎么样处理比较美观??? 解决方案 我没有弄过这样的,不过我觉得楼主可以参考下面三种方案:①参照QQ.微信等上传头像时的做法,将用户剪辑图片时的范围内容用样式记住,然后显示,这样就比较统一.②背景图片拉伸,这样自然能够完全填充,不过看上去就不太美观了:③可以让预览图片在内容框上垂直居中,这个上下留白会比单纯的下边留白好看一些.当然,上面都这是我的假想,具

js兼容火狐显示上传图片预览效果的方法_javascript技巧

本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type=&

js实现上传图片预览的方法_javascript技巧

图片预览的 javascript 本地操作 早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览 现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox  上图的html <tr> <td>缩略图</td> <td> <a href="javascript::void(0)" class="fileBtn&q

JS上传图片预览插件制作(兼容到IE6)_javascript技巧

一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量. ②利用HTML5的新特性FileReader. 这个对象提供了

jQuery插件imgPreviewQs实现上传图片预览_jquery

上传图片预览,支持IE6.IE7.IE8.IE9.IE10.IE11. 火狐.Chrome 具体没有测试,但是高版本都支持. imgPreviewQs.js /*! 依赖 jQuery 1.5.2 (c) 2016 license: http://www.opensource.org/licenses/mit-license.php */ (function($){ $.fn.imgPreviewQs = function(options){ function isIE(ver){ var b

js上传图片预览代码(兼容IE、Chrome、Firefox)

我们一般根据IE6.IE7进行开发的时候写图片预览的代码是  代码如下 复制代码 document.getElementById("img").src = document.getElementById("file").value; 例子  代码如下 复制代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=