Ajax+PHP+jQuery图片截图上传Word格式.docx
《Ajax+PHP+jQuery图片截图上传Word格式.docx》由会员分享，可在线阅读，更多相关《Ajax+PHP+jQuery图片截图上传Word格式.docx（9页珍藏版）》请在冰豆网上搜索。
实现文件的上传的功能，支持多文件上传，且可定制性非常强。
上面的插件是用在客户端上，其实在我这个程序里写PHP时也用了一些插件。
其实我之所以写"
图像剪裁上传"
的起源是因为我看了《PHP快速开发工具箱》想自己练习一下的。
该书是有一个网址（
∙PIPHP_UploadFile.php：
这是一个文件上传功能的php文件
∙PIPHP_ImageCrop.php：
这个php文件是具有对图片进行裁剪的功能
2、客户端与服务器之间的交互图
为了便于理解，我先把交互图放在这里。
其中绿色部分是客户端的主要步骤、粉红色是服务器端的主要步骤，服务器与客户端之间的交互通过AJAX完成。
可以发现，大部分的操作在客户端进行，服务器端与客户端之间的交流只是简单的JSON数据，因此这样给用户的体验是非常高的。
截图1 客户端与服务器之间交互图
3、客户端文件
展示给用户的是html页面，为了学习并巩固CSS知识，就和DIV+CSS搭建了下面这样一个前台页面，见截图2。
截图2 前台页面
跟客户端有关的文件主要是一个index.html，而在这个文件里面会引用其他的插件文件，因此可以说，客户端方面只有一个html文件。
另外，由于这里主要讨论客户端与浏览器之间的交互，因此略过CSS方面的内容。
这里只列出HTML的代码，首先是<
head>
部分：
<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
linkrel="
stylesheet"
type="
text/css"
href="
/imgareaselect/css/imgareaselect-default.css"
layout.css"
linkhref="
/uploadify/uploadify.css"
rel="
scripttype="
text/javascript"
src="
/js/jquery-1.6.2.min.js"
>
/script>
/imgareaselect/scripts/jquery.imgareaselect.pack.js"
/uploadify/swfobject.js"
/uploadify/jquery.uploadify.v2.1.4.min.js"
title>
图片剪切上传<
/title>
/head>
可以看得出来主要是引用一些插件的文件。
上面的文件（包括CSS文件与js文件）都可以从我给的链接里下载到，只是样式表layout.css是我自己写的样式表，大家可以根据自己的CSS知识写出。
接下来是body部分，也许这么看代码比较乱，推荐使用一些带有高亮显示的工具来查看这些代码，比如DreamWeaver等IDE，实在不行，也可以用火狐的"
查看源代码"
来看。
（火狐不仅是一个好浏览器，更是一个极棒的调试器！
）
为了方便起见，我去掉诸如"
导航条"
、页脚版权声明等点缀部分，只给出必要的html代码。
bodyclass="
home"
form>
fieldset>
legend>
图片上传<
/legend>
divid="
queue"
/div>
inputtype="
file"
name="
id="
pic_upload"
/>
br/>
aid='
uploadLink'
javascript:
$（'
#pic_upload'
）.uploadifyUpload（）;
"
上传图片<
/a>
uploadInfo"
/fieldset>
/form>
twoColLayout"
primaryContent"
div>
h3>
图片预览<
/h3>
divid='
oriImage'
class="
img_v"
裁剪结果：
cropResult"
cbb"
>
sideContent"
裁剪预览：
preview"
/body>
上面我用颜色区分开主要DIV区，这三块分别代表"
上传图片区"
、"
大图展示区"
截图结果区"
与"
选择预览区"
。
其中三个粗体部分是带有ID属性的空DIV，用来放图片用的。
（到时时候动态加载图片到这些DIV中），因此这段代码形成的HTML框架如截图2所示。
（蓝色线条是block元素边界，此效果较是由火狐的插件制作而成）：
截图3页面大体框架
基本的准备工作已经完成，待会儿再继续在这个框架上添加代码。
咱们先介绍一下服务器上的PHP是怎么个情况。
4、服务器文件
服务器上主要用到两个PHP文件，一个用来处理上传图片的process.php，另外一个则是处理图片截图用的crop.php。
不过，process.php文件包括插件PIPHP_UploadFile.php，而crop.php中包括PIPHP_ImageCrop.php插件。
（这些插件的地址我在上面已经给出了）
＝＝＝＝＝＝＝
process.php主要接收上传图片，设置限制（比如文件的大小与格式），处理一些上传错误等，最后返回给客户端JSON，里面包含了所上传文件的一些信息（比如路径、大小等）；
当在客户端点击"
按钮的时候，会用异步（AJAX）的方式调用这个php文件。
crop.php主要负责真正裁剪上传的图片，当在客户端返回裁剪的位置后（点击"
按钮后），以异步方式将数据以JSON的方式传递给服务器，crop.php真正裁剪图片后，将图片另存到网络的目录下，同时返回此图片的存储路径，然后再让客户端显示图片即可
三、用到的技术摘要
现在根据上面的交互图继续完善代码。
因此我这节会交叉地完善html、js与php代码，并不会单独分开完善，这样在逻辑上会更好理解。
声明：
新增的代码部分用粗体表示
１、uploadify上传
在html的head部分加入<
script>
标签，里面开始写主要的处理程序：
…
script type="
src="
$（document）.ready（function（）{
//uploadify设置
）.uploadify（{
'
uploader'
:
'
/uploadify/uploadify.swf'
script'
process.php'
cancelImg'
/uploadify/cancel.png'
}）;
}
上面的代码只是uploadify这一个插件的配置项而已。
为了增强用户体验可以详细配置其他选项，这参考这个插件的官方文档：
２、process.php反馈上传信息
process.php的任务就是给浏览器返回JSON数据（至于什么是JSON请参考其它教程，把JSON想像成"
键/值"
对就可以了，它很方便数据的传输与读取）。
在PHP里，一般是先把数据整理成数组的形式，然后使用）把数据转换成JSON。
那process.php应该给浏览器返回什么样的数据呢？
∙文件是否成功上传->
message
∙文件的上传状态代码->
code
∙文件上传的存放路径->
path
∙图片的宽度->
width
∙图片的高度->
height
∙图片的缩放比例->
scale
∙图片的名称->
name
其中之所以设置图片的缩放比例scale，是因为如果用户上传的图片尺寸太大（比如800x８00），浏览器中的DIV会被"
撑开"
，布局会被打乱。
因此我们限定在浏览器显示图片的时候任何一边长不能超过400px,否则在显示的时候以等比例缩放。
（比如上面的800x800的图上会显示成400x400的，然后浏览器同时设置scale为0.5）。
另外，这个php文件是调用了PIPHP_UploadFile.php这个插件，用来将上传的文件进行"
鉴别"
搬移"
下面是process.php的程序：
?
php
require_once（dirname（__FILE__）."
/../PIPHP_UploadFile.php"
）;
$response=array（
message'
=>
未知上传错误'
path'
code'
-4,//上传结果代码，0表示成功，－1表示失败
width'
100,
height'
scale'
1,//比例尺
name'
if
升级会员 