您的位置：首页 > 数码常识数码常识
ajax实现文件上传（ajax提交form表单上传文件）
2025-05-12人已围观
ajax实现文件上传（ajax提交form表单上传文件）
IE浏览器版本最好为：IE10+，因为 FormData 兼容性问题
ajax提交form表单上传文件
然后查看示例，代码如下↓
html 代码：
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="http://sjzlt.cn/shuma/jquery-1.8.3.min.js"></script><style type="text/css">#showimg{margin-top: 20px;height: 150px;}#showimg div{width: 100px;height: 100px;line-height:100px;margin-right: 20px;float: left;text-align: center;}#showimg img{vertical-align: middle;max-width: 100%;max-height: 100%;}</style><script type="text/javascript">jQuery(function () {jQuery('#butSubmit').click(function () {var file=jQuery('#fileId')[0].files;var formDataInfo=new FormData(jQuery('#FormDataUpload')[0]);formDataInfo.append('file',file);//表单数据formDataInfo.append('ajajxfile', 1);//额外加数据// var formDataInfo=new FormData();// formDataInfo.append('pic', jQuery("#picId")[0].files[0]);// formDataInfo.append('ajajxfile', 1);//额外加数据//jQuery.each(jQuery("#fileId")[0].files,function (k,val) {// formDataInfo.append('fileimg[]', val);// });// alert(formData);jQuery.ajax({type:'post',url:'upload.php',dataType:'json',cache:false,processData:false,//必须contentType:false,//必须data:formDataInfo,success:function (data) {// alert(data);var html='';for (var i=0;i<data.length;i++){html +='<div><img src="http://sjzlt.cn/shuma/'+data[i]+'"></div>';}jQuery('#showimg')(html);},error:function () {alert('Error');}});});});</script></head><body><br><form action="upload.php" method="post" enctype="multipart/form-data"><input name="img[]" type="file" multiple><!--<input name="picId" type="file" >--><input type="button" value="提交" ><!-- <input type="submit" name="dosubmit" value="提交Form">--></form><div ></div></body></html>
后台程序 PHP代码：
<?phpdate_default_timezone_set('PRC');if (!empty($_POST)){if ($_FILES['img']['name'][0]){$path='upload/';if (!is_dir($path)){mkdir(iconv("UTF-8", "GBK", $path),0777,true);}$datafile=$_FILES['img'];$filearr=array();foreach ($datafile['name'] as $key=>$value){$type=pathinfo($value);$filename=$path.time().mt_rand(0,999999999).'.'.$type['extension'];if (move_uploaded_file($datafile['tmp_name'][$key],$filename)){$filearr[]=$filename;}}print_r(json_encode($filearr));die;}}
一个简单的ajax上传文件，欢迎广大朋友们一起来学习！
上面就是小居数码小编今天给大家介绍的关于（ajax提交form表单上传文件）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
如何使用ftp软件上传文件到服务器教程（ftp服务器怎么上传文件）
浏览器拖拽上传常见的方法分享（js拖拽上传文件）
html上传文件有几种方式（上传html文件的步骤）
HTTP上传文件服务器搭建方法（搭建HTTP上传文件服务器）
155003
IE浏览器版本最好为：IE10+，因为 FormData 兼容性问题
ajax提交form表单上传文件
然后查看示例，代码如下↓
html 代码：
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="http://sjzlt.cn/shuma/jquery-1.8.3.min.js"></script><style type="text/css">#showimg{margin-top: 20px;height: 150px;}#showimg div{width: 100px;height: 100px;line-height:100px;margin-right: 20px;float: left;text-align: center;}#showimg img{vertical-align: middle;max-width: 100%;max-height: 100%;}</style><script type="text/javascript">jQuery(function () {jQuery('#butSubmit').click(function () {var file=jQuery('#fileId')[0].files;var formDataInfo=new FormData(jQuery('#FormDataUpload')[0]);formDataInfo.append('file',file);//表单数据formDataInfo.append('ajajxfile', 1);//额外加数据// var formDataInfo=new FormData();// formDataInfo.append('pic', jQuery("#picId")[0].files[0]);// formDataInfo.append('ajajxfile', 1);//额外加数据//jQuery.each(jQuery("#fileId")[0].files,function (k,val) {// formDataInfo.append('fileimg[]', val);// });// alert(formData);jQuery.ajax({type:'post',url:'upload.php',dataType:'json',cache:false,processData:false,//必须contentType:false,//必须data:formDataInfo,success:function (data) {// alert(data);var html='';for (var i=0;i<data.length;i++){html +='<div><img src="http://sjzlt.cn/shuma/'+data[i]+'"></div>';}jQuery('#showimg')(html);},error:function () {alert('Error');}});});});</script></head><body><br><form action="upload.php" method="post" enctype="multipart/form-data"><input name="img[]" type="file" multiple><!--<input name="picId" type="file" >--><input type="button" value="提交" ><!-- <input type="submit" name="dosubmit" value="提交Form">--></form><div ></div></body></html>
后台程序 PHP代码：
<?phpdate_default_timezone_set('PRC');if (!empty($_POST)){if ($_FILES['img']['name'][0]){$path='upload/';if (!is_dir($path)){mkdir(iconv("UTF-8", "GBK", $path),0777,true);}$datafile=$_FILES['img'];$filearr=array();foreach ($datafile['name'] as $key=>$value){$type=pathinfo($value);$filename=$path.time().mt_rand(0,999999999).'.'.$type['extension'];if (move_uploaded_file($datafile['tmp_name'][$key],$filename)){$filearr[]=$filename;}}print_r(json_encode($filearr));die;}}
一个简单的ajax上传文件，欢迎广大朋友们一起来学习！
上面就是小居数码小编今天给大家介绍的关于（ajax提交form表单上传文件）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
如何使用ftp软件上传文件到服务器教程（ftp服务器怎么上传文件）
浏览器拖拽上传常见的方法分享（js拖拽上传文件）
html上传文件有几种方式（上传html文件的步骤）
HTTP上传文件服务器搭建方法（搭建HTTP上传文件服务器）
155003
很赞哦！ ()