0 0

上传图片预览思路问题5

分一共就9分,系统提示只能5分,对不住大牛们了啊。

小弟最近在做上传文件预览功能,使用技术为struts2,遇到的问题如下:

1、背景:维修报告有多个维修图片,维修图片在保存维修报告主信息时可以预览,维修图片保存的路径为--维修报告ID / phone / 文件名(时间戳文件名)

2、需求:用户需要在保存维修报告主信息之前预览已上传图片。

3、自己的解决方式以及遇到问题:
   3.1、
      方式:用户保存主信息前,不允许用户上传图片,用户修改维修报告主信息的时候,可以上传图片,系统将图片保存到服务器后,可以预览。
     遇到问题:缺点是不能一并保存。
   3.2、
      方式:用户添加图片后,保存在临时文件夹中,等待用户保存维修报告主信息后,将临时文件夹中的图片文件移动到 上面背景中指定的目录中或者将临时文件夹的名称修改为 维修报告的ID。
      遇到问题:如果用户突然关闭浏览器或者人为无法控制的故障原因,系统针对临时图片文件的处理问题;如果临时文件夹为同一个名字,那么就涉及到多个用户同时操作一个文件夹的并发额外难题,如果临时文件夹为不同名字,我改如何处理图片文件的清理和修改文件夹名字呢?
   3.3、
      方式:利用jquery预览图片。
      遇到问题:由于现在主流浏览器由于出去安全性考虑,不能通过jquery得到file控件的文件的全路径,所以此种方式,按照网上找的很难大都很难兼容。

4、大牛们帮忙看看小弟的问题啊。谢谢。

问题补充:有更好的方式或者更完善的方式么?
2012年12月16日 13:18

1个答案 按时间排序 按投票排序

0 0

采纳的答案

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

2012年12月16日 15:00

相关推荐

    j2ee里图片上传及预览的实现

    本文将详细解析如何在J2EE环境中实现这一功能,主要分为两个部分:前端JavaScript控制的图片预览和后端Java处理的文件上传。 一、前端JavaScript控制的图片预览 1. 预览功能: 在HTML页面中,我们通常使用`...

    ie8下上传图片无法预览本地图片解决方法技术资料

    为了解决IE8中图片上传预览失败的问题,本文将详细介绍一种通过使用`AlphaImageLoader`滤镜来实现图片预览的技术方案,并提供具体的实现代码及注意事项。 #### 解决方案的核心思路 本解决方案的核心在于利用IE特有...

    【ASP.NET编程知识】ASP.NET MVC图片上传前预览简单实现.docx

    // 上传图片处理逻辑 } ``` 2. 在视图中使用JavaScript和jQuery库来预览图片。 ```html ~/Scripts/jquery-1.10.2.min.js"> $(function () { $('#fileInput').change(function () { var file = this.files[0]; ...

    javascript实现input file上传图片预览效果

    本文档主要讲述了使用JavaScript实现文件上传输入框(input file)上传图片后的预览效果。在Web开发中,用户经常需要上传图片文件,而在上传之前提供一个预览功能可以让用户确认他们选择的是正确的文件,改善用户...

    jQuery多尺寸图片上传预览代码.zip

    今天我们将深入探讨一篇关于“jQuery多尺寸图片上传预览代码”的实践教程,它结合了jQuery特效、CSS特效以及网页特效,为开发者提供了丰富的实现思路。 首先,jQuery库是JavaScript的一个轻量级框架,它的出现极大...

    C# 使用uploadify实现图片批量上传

    Uploadify是一个基于jQuery的开源插件,它提供了一种优雅的方式来处理文件上传,支持多文件选择、预览、进度条显示等功能,极大地改善了用户体验。它可以与多种服务器端语言(如C#)配合使用。 2. **C#后端处理**...

    ajax实现图片上传

    本篇文章将详细介绍如何利用Ajax实现图片上传的功能,包括前端页面设计、图片预览功能、以及Ajax上传代码实现等关键步骤。 #### 二、前端页面设计 前端页面是用户与系统交互的第一线,因此设计一个友好且功能完整的...

    JS实现上传图片的三种方法并实现预览图片功能

    第二种方法利用了`FileReader` API在客户端进行图片预览。用户选择图片后,通过JavaScript读取图片文件并将其转换为DataURL或者Blob URL,然后直接显示在`<img>`标签中。 ```javascript function bindAvatar2() { ...

    头像裁剪上传功能HTML源码

    1. **图片预览**:通常,我们需要通过HTML5的File API来读取用户选择的文件,将图片数据转换为可以在页面上展示的格式,如`<img>`标签的`src`属性。这一步骤可能涉及使用`FileReader`对象的`readAsDataURL()`方法。 ...

    JS HTML5拖拽上传图片预览

    实现拖拽上传图片预览的基本思路如下: 1. 监听目标元素的拖放事件,特别是`dragstart`、`dragover`、`dragleave`和`drop`。 2. 在`dragstart`事件中,设置`DataTransfer`对象的属性,如允许的效果和拖放图像。 3. ...

    asp+flash完美批量上传图片程序源代码

    在本案例中,"asp+flash完美批量上传图片程序源代码"是一个利用ASP技术和Adobe Flash来实现用户友好的批量图片上传功能的程序。Flash曾经是创建网页交互元素的流行工具,特别是对于处理多媒体内容如图片上传,它提供...

    手机移动端图片上传预览|压缩|旋转-H5+canvas+EXIF+mobileBUGFix

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;...因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。

    Java上传视频和转码的编程思路

    - 从视频中抽取关键帧作为预览图,可以使用FFmpeg的截图功能,将其保存为图片文件。 5. **视频播放**: - 视频播放通常依赖于Flash Player,使用`.swf`格式的播放器,如文中提到的`player.swf`,加载FLV格式的...

    js实现图片上传预览原理分析

    首先,我们来看一下传统的预览思路。在早期的浏览器中,当用户选择本地图片后,图片的完整路径会被暴露,JavaScript可以直接通过这个路径加载图片进行预览。然而,出于安全考虑,现代浏览器(尤其是非IE浏览器)不再...

    jQuery实现多张图片上传预览(不经过后端处理)

    图片预览的实现思路 在不经过后端处理的情况下,前端需要读取用户选择的文件,根据文件类型和内容生成图片的预览。通常,这涉及到将File对象转换为可以在img标签的src属性中使用的URL,这一步可以通过创建一个对象...

    flash多图上传

    总的来说,FlashImageUpload是一个基于Flash的多图上传组件,利用Flash的多媒体处理能力实现图片的批量选择、预览、上传等功能。虽然Flash已不再流行,但理解其工作原理有助于我们更好地理解现代前端技术,尤其是...

    上传图片的代码实现

    在开发Web应用时,上传图片是一项常见的功能,它允许用户上传个人照片、产品图像或任何其他类型的图片到服务器。在本文中,我们将深入探讨如何在不同的编程语言和框架下实现图片上传的代码。 首先,我们需要了解...

    phpcms修改为H5上传.rar

    3. 图片预览:对于图片文件,可以在上传前进行预览,增加用户确认环节。 通过以上步骤,我们可以成功地将PHPCMS的Flash上传方式转变为H5上传,既提升了用户体验,也符合现代网络技术的发展趋势。在实际操作中,可能...

    Axure原型设计:移动端图片管理原型.docx

    在移动端图片管理原型中,图片上传与导入是最基本的功能之一。Axure 原型设计中提供了两种上传方式:单图上传和多图上传。单图上传通常应用于上传头像、身份证、银行卡等资料进行身份认证,而多图上传应用于商品介绍...

Global site tag (gtag.js) - Google Analytics