今天就和大家分享一下用PHP jQuery Ajax上传多张图片而不刷新页面的效果。用户只需要点击选择需要上传的图片，然后图片就会自动上传到服务器，显示在页面上。

超文本标记语言

我们在页面上放置一个表单，并使用post将其提交给后台php处理程序upload.php。注意enctype属性的设置，支持文件上传。#预览用于显示上传的图片。Css样式设置在本文中没有解释，请参考下载包的源代码。

复制代码如下： form id=' image form ' method=' post ' enctype=' multipart/form-data ' action=' upload . PHP ' Div id=' up _ status ' style=' display : none ' img src=' http : loader . gif ' alt=' uploading '/Div id=' up _ BTN ' class=' BTN ' spanADd picture/span input id=' photo img ' type=' file ' name=' photo img '/Div//p div id='预览'/div

jquery的这个实例基于jQuery，所以必须在页面中加载jQuery库和jquery.wallform.js。

复制代码的代码如下： script type=' text/JAVAScript ' src=' http 3360 jquery . min . js '/script script type=' text/JAVAScript ' src=' http : jquery . wall form . js '/script。

点击“添加图片”按钮，弹出选择文件对话框，选择要上传的图片后触发变更事件。然后表单#imageform调用jquery.wallform.js的ajaxForm()方法，将表单数据提交到后台PHP进行处理，根据返回的结果处理页面元素的显示。如果上传成功，图片会被一一排列显示在页面上。关于ajaxForm()的使用，请参考本文：Ajax表单提交插件jqery表单。

复制代码如下： $ (function () {$ ('# photoimg ')。芯片(‘咔嚓’)。live ('change '，function(){ var status=$(' # up _ status ')；var BTN=$(' # up _ BTN ')；$('#imageform ')。ajaxForm({ target: '#preview '，before submit : function(){ status . show()；BTN . hide()；}，success : function(){ status . hide()；BTN . show()；}，error : function(){ status . hide()；BTN . show()；} }).submit()；});});

服务器端编程语言（Professional Hypertext Preprocessor的缩写）

Upload.php处理图片的上传，并将上传的图片保存在上传/目录中。注意目录应该有写权限。首先要检查是否在POST模式下提交，然后确定图片的格式和大小是否符合要求。然后，使用move_uploaded_file()上传图片，并将图片重命名为time()格式。兰特(100，999)。

复制代码如下： $ path=' uploads/'；$ extArr=数组(' jpg '，' png '，' gif ')；if(isset($_POST)和$ _ SERVER[' REQUEST _ METHoD ']==' POST '){ $ name=$ _ FILES[' photo img '][' name ']；$ size=$ _ FILES[' photo img '][' size ']；If(空($name)){ echo '请选择要上传的图片'；退出；} $ ext=extend($ name)；if(！In_array($ext，$ ExTRAR)){ echo '图片格式错误！'；退出；} if($size(100*1024)){ echo '图片大小不能超过100KB '；退出；} $image_name=time()。兰特(100，999)。'.'。$ ext$ tmp=$ _ FILES[' photo img '][' tmp _ name ']；if(move_uploaded_file($tmp，$path。$ image _ name)){ echo ' img src=' http : '。$path。$image_name。类=“预览”；}上传}else{ echo '！'时出错；}退出；}//获取文件类型后缀functionextend($ file _ name){ $ extend=path info($ file _ name)；$ extend=strtolow($ extend[' extension '])；return $ extend}

当然，在实际应用中，可以结合数据库和用户中心将用户上传的图片保存在数据表中，具体应用可以自己研究。

以上就是本文的全部内容。希望你能喜欢。