Ajax+PHP+jQuery图片截图上传Word格式.docx
《Ajax+PHP+jQuery图片截图上传Word格式.docx》由会员分享,可在线阅读,更多相关《Ajax+PHP+jQuery图片截图上传Word格式.docx(9页珍藏版)》请在冰豆网上搜索。
![Ajax+PHP+jQuery图片截图上传Word格式.docx](https://file1.bdocx.com/fileroot1/2022-10/27/2b9179eb-265e-4a67-9ad6-f2766e2327e5/2b9179eb-265e-4a67-9ad6-f2766e2327e51.gif)
实现文件的上传的功能,支持多文件上传,且可定制性非常强。
上面的插件是用在客户端上,其实在我这个程序里写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代码,并不会单独分开完善,这样在逻辑上会更好理解。
声明:
新增的代码部分用粗体表示
1、uploadify上传
在html的head部分加入<
script>
标签,里面开始写主要的处理程序:
…
script type="
src="
$(document).ready(function(){
//uploadify设置
).uploadify({
'
uploader'
:
'
/uploadify/uploadify.swf'
script'
process.php'
cancelImg'
/uploadify/cancel.png'
});
}
上面的代码只是uploadify这一个插件的配置项而已。
为了增强用户体验可以详细配置其他选项,这参考这个插件的官方文档:
2、process.php反馈上传信息
process.php的任务就是给浏览器返回JSON数据(至于什么是JSON请参考其它教程,把JSON想像成"
键/值"
对就可以了,它很方便数据的传输与读取)。
在PHP里,一般是先把数据整理成数组的形式,然后使用)把数据转换成JSON。
那process.php应该给浏览器返回什么样的数据呢?
∙文件是否成功上传->
message
∙文件的上传状态代码->
code
∙文件上传的存放路径->
path
∙图片的宽度->
width
∙图片的高度->
height
∙图片的缩放比例->
scale
∙图片的名称->
name
其中之所以设置图片的缩放比例scale,是因为如果用户上传的图片尺寸太大(比如800x800),浏览器中的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