一种上传图片的方法及系统的制作方法
【专利摘要】本发明公开一种上传图片的方法及系统，用于基于AJAX实现从第一服务器上传图片到第二服务器，第一服务器包括第一图片存储目录，第一图片存储目录至少包括第一文件夹以及与第一文件夹不同的第二文件夹，第一服务器与第二服务器互相连接，该方法包括：获得至少两张待上传图片；所述至少两张待上传图片包括从位于一上传页面的文件目录区域中的所述第一文件夹和所述第二文件夹中选择的需要上传的图片；将所述至少两张待上传图片添加到所述上传页面的图片列表区域；在第二服务器的第二图片存储目录中确定用于存储所述待上传图片的上传文件夹；将图片列表中的所述至少两张待上传图片上传到所述上传文件夹。
【专利说明】一种上传图片的方法及系统
【技术领域】
[0001]本发明涉及互联网应用领域，尤其涉及一种上传图片的方法及系统。
【背景技术】
[0002]随着近些年信息化的迅猛发展，互联网应用越来越受人们的喜爱，像电子商务、BBS论坛、以及各门户网站等都离不开批量对文件的上传下载，对普通上载做了一些扩展。
[0003]互联网的飞跃发展，各网络上的图片越来越多，报纸上图片的篇幅越来越多，面积越来越大，位置也越来越重要，图片之所以有着如此魅力，是因为图片具有具像性、独特性、多元性，这些往往是任何文字所无法替代的。
[0004]"读图时代"已经来临，越来越多的图片要展示，离不开批量图片的上传，它为大量的图片提供了再增值的机会。
[0005]AJAX, ( “Asynchronous JavaScript and XML，，，异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
[0006]现目前，大多使用AJAX批量上载都使用jsp提供的一个file类浏览打开一个窗口选择所要上传的文件，类似如下常用书写的方法:
[0007]〈form action = " " method = " post " name = " MainForm " ENCTYPE="multipart/form-data77 >
[0008]〈input type = " file" name = " file" id = " file" />
[0009]〈/form〉发明人在发明过程中，发现现有的方案中至少存在以下问题:
[0010]首先，要批量上传，得增加一个相应的窗口，如下所示:
[0011]〈input type = " file" name = " file" id=" file" /> 窗口，这样不利于定义用户上传的数量；
[0012]其次，现有技术中基于AJAX上传图片时不能在同一个窗口下选择不同位置的文件，效率低下。
【发明内容】
[0013]本申请实施例提供一种上传图片的方法及系统，实现了基于AJAX批量上传图片时，可以改变盘符和文件路径，选择不同位置的文件进行批量上传。
[0014]本申请实施例提供了一种上传图片的方法，用于基于AJAX实现从第一服务器上传图片到第二服务器，所述第一服务器包括第一图片存储目录，所述第一图片存储目录至少包括第一文件夹以及与所述第一文件夹不同的第二文件夹，所述第一服务器与所述第二服务器互相连接，所述方法包括:
[0015]获得至少两张待上传图片；所述至少两张待上传图片包括从位于一上传页面的文件目录区域中的所述第一文件夹和所述第二文件夹中选择的需要上传的图片；
[0016]将所述至少两张待上传图片添加到所述上传页面的图片列表区域；[0017]在所述第二服务器的第二图片存储目录中确定用于存储所述待上传图片的上传文件夹；
[0018]将所述图片列表中的所述至少两张待上传图片上传到所述上传文件夹。
[0019]进一步的，所述第一服务器还包括与所述第一图片存储目录不同的第三图片存储目录，所述至少两张待上传图片还包括:
[0020]从位于所述文件目录区域中的所述第三图片存储目录中的文件夹中选择的需要上传的图片。
[0021]为了识别出所选图片是否为想要上传的图片，所述上传页面还包括:
[0022]用于预览图片的图片预览区域。
[0023]所述图片列表区域包括:
[0024]用于显示所述待上传图片的存储目录的第一区域；以及
[0025]用于显示所述待上传图片的上传状态的第二区域。
[0026]进一步的，在所述将所述至少两张待上传图片添加到所述上传页面的图片列表区域之后，所述方法还包括:
[0027]添加新的需要上传的图片到所述图片列表，所述新的需要上传的图片具体为从位于所述第一区域中的图片存储目录选择的图片。
[0028]进一步的，在所述添加新的需要上传的图片到所述图片列表之后，所述方法还包括:
[0029]对所述图片列表中的待上传图片进行删除、归类或者排序。
[0030]其中，所述待上传图片的上传状态包括:
[0031]上传中状态、未上传状态、上传成功状态以及上传失败状态。
[0032]所述将所述图片列表中的所述至少两张待上传图片上传到所述上传文件夹的过程中，所述待上传图片的其中一张图片在上传时显示上传中状态，上传成功后，无刷新显示上传成功状态，并接着进行下一张图片的上传。
[0033]本申请实施例还提供一种上传图片的系统，用于基于AJAX实现从第一服务器上传图片到第二服务器，所述第一服务器包括第一图片存储目录，所述第一图片存储目录至少包括第一文件夹以及与所述第一文件夹不同的第二文件夹，所述第一服务器与所述第二服务器互相连接，所述系统包括:
[0034]获得单元，用于获得至少两张待上传图片；所述至少两张待上传图片包括从位于一上传页面的文件目录区域中的所述第一文件夹和所述第二文件夹中选择的需要上传的图片；
[0035]添加单元，用于将所述至少两张待上传图片添加到所述上传页面的图片列表区域；
[0036]确定单元，用于在所述第二服务器的第二图片存储目录中确定用于存储所述待上传图片的上传文件夹；
[0037]上传单元，用于将所述图片列表中的所述至少两张待上传图片上传到所述上传文件夹。
[0038]进一步的，所述第一服务器还包括与所述第一图片存储目录不同的第三图片存储目录，所述添加单元将所述至少两张待上传图片还包括:从位于所述文件目录区域中的所述第三图片存储目录中的文件夹中选择的需要上传的图片。
[0039]本申请通过以上一个或多个实施例提供的技术方案，具有以下有益技术效果或者优点之一:
[0040]本申请结合了 windows的FSO文件系统，用户上传选择图片文件可以像操作windows系统一样进行文件夹列表方式单选或多选所要上传的图片文件，对本地图片文件可以浏览，可以改变盘符和文件路径，选择不同位置的文件进行批量上传，还可以查看每张图的上传状态以及上传成功的数量，满足"读图时代"的图片信息的上传提高了效率；
[0041]本申请充分结合了 FTPPutFile、AJAX技术，上传时显示一个状态，成功后由AJAX实现无刷新显示另一状态，并接着实现下一个文件的上传，以此类推，实现无刷新上传。
【专利附图】
【附图说明】
[0042]图1为本申请实施例提供的上传图片的方法流程图；
[0043]图2为基于AJAX批量上传图片的上传主页面；
[0044]图3为批量上传文件时，显示上传文件的完整路径和当前上传文件的状态图；
[0045]图4为实现无刷新上传的画面图；
[0046]图5为本申请实施例还提供一种上传图片的系统框图。
【具体实施方式】
[0047]本申请实施例提供一种上传图片的方法及系统，实现了基于AJAX批量上传图片时，可以改变盘符和文件路径，选择不同位置的文件进行批量上传。
[0048]本申请实施例中的技术方案为了实现上述技术效果，总体思路如下:
[0049]本申请实施例基于windows控件，AJAX技术配合任意一应用服务器和FTP (FileTransfer Protocol,文件传输协议)服务器即可实现远程批量上传。
[0050]本申请实施例基于AJAX技术批量上载图片的实现方法就是利用API函数、FTPPutFile和Ajax实现无刷新批量上载。利用API函数实现与FTP服务器的连接与对话，可以根据主机服务器的地址和端口连接到Internet上任何一台FTP服务器上，对FTP服务器进行图片批量上载。
[0051]FTPPutFile方法负责将选择的一个文件上传到设定的FTP服务器上，上传时显示一个状态，成功后由Ajax实现无刷新显示另一状态，并接着实现下一个文件的上传，以此类推。
[0052]FTPPutFile 上传标签
[0053]FTPPutFile是用来向FTP服务器上传文件，使用方法简介如下，先引用:
[0054]〈OBJECTID="wfile"
CLASSID="CLSID:4CFElC4C-FE2E-4698-BE；BF-78FI802F23A4"
Style="display: none" VIEWASTEXT></OBJECT>
<script language="JavaScript">
//定义FTP服务器
var ftpurl="ftp://l27.0.0.1/目录//FTP服务器的上传文件路径 var fi1ename="c:\testpic.jpg"; /7所要上传的本地文件 vvfile.FTPPu1:File(ftpur],filename); //上传文件 //可删除本地临时上传的文件 Yar nfile = fs0.GetFile(filename): nfile.Delete(true): //删除本地文件 </script>
[0055]FTPPutFile是用来向FTP服务器上传文件，定义FTP服务器，以及FTP服务器的上传文件路径；运用FTPPutFile，可以对选择的文件进行编辑，如删除本地文件、上传文件、可删除本地临时上传的文 件等。
[0056]文件系统对象FSO的英文全称是File System Ob ject，这种对象模型提出了有别于传统的文件操作语句处理文件和文件夹的方法。通过采用object, method这种在面向对象编程中广泛使用的语法，将一系列操作文件和文件夹的动作通过调用对象本身的属性直接实现。
[0057]标签示例:
[0058]
【权利要求】
1.一种上传图片的方法，用于基于AJAX实现从第一服务器上传图片到第二服务器，所述第一服务器包括第一图片存储目录，所述第一图片存储目录至少包括第一文件夹以及与所述第一文件夹不同的第二文件夹，所述第一服务器与所述第二服务器互相连接，其特征在于，所述方法包括: 获得至少两张待上传图片；所述至少两张待上传图片包括从位于一上传页面的文件目录区域中的所述第一文件夹和所述第二文件夹中选择的需要上传的图片； 将所述至少两张待上传图片添加到所述上传页面的图片列表区域； 在所述第二服务器的第二图片存储目录中确定用于存储所述待上传图片的上传文件夹； 将所述图片列表中的所述至少两张待上传图片上传到所述上传文件夹。
2.如权利要求1所述的方法，其特征在于，所述第一服务器还包括与所述第一图片存储目录不同的第三图片存储目录，所述至少两张待上传图片还包括: 从位于所述文件目录区域中的所述第三图片存储目录中的文件夹中选择的需要上传的图片。
3.如权利要求1或2所述的方法，其特征在于，所述上传页面还包括: 用于预览图片的图片预览区域。
4.如权利要求3 所述的方法，其特征在于，所述图片列表区域包括: 用于显示所述待上传图片的存储目录的第一区域；以及 用于显示所述待上传图片的上传状态的第二区域。
5.如权利要求4所述的方法，其特征在于，在所述将所述至少两张待上传图片添加到所述上传页面的图片列表区域之后，所述方法还包括: 添加新的需要上传的图片到所述图片列表，所述新的需要上传的图片具体为从位于所述第一区域中的图片存储目录选择的图片。
6.如权利要求5所述的方法，其特征在于，所述添加新的需要上传的图片到所述图片列表之后，所述方法还包括: 对所述图片列表中的待上传图片进行删除、归类或者排序。
7.如权利要求6所述的方法，其特征在于，所述待上传图片的上传状态包括: 上传中状态、未上传状态、上传成功状态以及上传失败状态。
8.如权利要求7所述的方法，其特征在于，所述将所述图片列表中的所述至少两张待上传图片上传到所述上传文件夹的过程中，所述待上传图片的其中一张图片在上传时显示上传中状态，上传成功后，无刷新显示上传成功状态，并接着进行下一张图片的上传。
9.一种上传图片的系统，用于基于AJAX实现从第一服务器上传图片到第二服务器，所述第一服务器包括第一图片存储目录，所述第一图片存储目录至少包括第一文件夹以及与所述第一文件夹不同的第二文件夹，所述第一服务器与所述第二服务器互相连接，其特征在于，所述系统包括: 获得单元，用于获得至少两张待上传图片；所述至少两张待上传图片包括从位于一上传页面的文件目录区域中的所述第一文件夹和所述第二文件夹中选择的需要上传的图片; 添加单元，用于将所述至少两张待上传图片添加到所述上传页面的图片列表区域；确定单元，用于在所述第二服务器的第二图片存储目录中确定用于存储所述待上传图片的上传文件夹； 上传单元，用于将所述图片列表中的所述至少两张待上传图片上传到所述上传文件夹。
10.如权利要求9所述的系统，其特征在于，所述第一服务器还包括与所述第一图片存储目录不同的第三图片存储目录，所述添加单元将所述至少两张待上传图片还包括:从位于所述文件目录区域中的所述第三图片存储目录中的文件夹中选择的需要上传的图片。
【文档编号】G06F17/30GK103577460SQ201210272749
【公开日】2014年2月12日 申请日期:2012年8月2日 优先权日:2012年8月2日
【发明者】周宇 申请人:北大方正集团有限公司, 北京北大方正电子有限公司