jquery+php+ajax上传图片.docxVIP

/shaobingj126/article/details多项目中需要用到即时上传功能，比如，选择本地图片后，立即上传并显示图像。本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能，用户只需选择本地图片确定后即实现上传，并显示上传进度条，上传完成后，显示图片信息。/demo/upload/查看演示DEMO/demo/downzip/upload.zip下载源码HTML本示例基于jQuery以及相当出色的jquery.form插件，所以，先要载入jquery库和form插件。script?type=text/javascript?src=jquery.min.js/script?script?type=text/javascript?src=jquery.form.js/script?接着在页面中加入如下代码：div?class=btn??span添加附件/span??input?id=fileupload?type=file?name=mypic?/div?div?class=progress??span?class=bar/spanspan?class=percent0%/span??/div?div?class=files/div?div?id=showimg/div?我们在html中放置一个添加附件的按钮元素.btn，以及进度条.progress，用于显示文件信息的.files和显示图片的#showimg可以看出，我们用于上传文件的html中并没有出现form表单，而正常的上传功能是要依赖form表单的。我们的form表单是动态插入的，这样可以避免一个大表单中出现多个form。CSS我们使用css可以将传统的浏览文件的表单控件美化成一个按钮，这样看起来是不是很酷。.btn{position:?relative;overflow:?hidden;margin-right:?4px;display:inline-block;?*display:inline;padding:4px?10px?4px;font-size:14px;line-height:18px;?*line-height:20px;color:#fff;?text-align:center;vertical-align:middle;cursor:pointer;background:#5bb75b;?border:1px?solid?#cccccc;border-color:#e6e6e6?#e6e6e6?#bfbfbf;?border-bottom-color:#b3b3b3;-webkit-border-radius:4px;?-moz-border-radius:4px;border-radius:4px;}?.btn?input{position:?absolute;top:?0;?right:?0;margin:?0;border:solid?transparent;?opacity:?0;filter:alpha(opacity=0);?cursor:?pointer;}?.progress{position:relative;?margin-left:100px;?margin-top:-24px;??width:200px;padding:?1px;?border-radius:3px;?display:none}?.bar?{background-color:?green;?display:block;?width:0%;?height:20px;??border-radius:3px;?}?.percent{position:absolute;?height:20px;?display:inline-block;??top:3px;?left:2%;?color:#fff?}?.files{height:22px;?line-height:22px;?margin:10px?0}?.delimg{margin-left:20px;?color:#090;?cursor:pointer}?jQuery首先定义各种变量，注意动态将表单元素form插入到上传按钮部位，并且form的属性enctype必须设置为：multipart/form-data。然后当点击“上传附件”按钮，选择要上传的文件后，调用jquery.form插件的ajaxSubmit方法，如下代码说明。$(function?()?{??var?bar?=?$(.bar);??var?percent?=?$(.percent);??var?showimg?=?$(#showimg);??var?progress?=?$(.progres