xml地图|网站地图|网站标签 [设为首页] [加入收藏]

Ajax异步上传文件实例代码分享,ajax实现文件异步

来源:http://www.ccidsi.com 作者:集成经验 人气:178 发布时间:2019-06-05
摘要:皇家赌场网址 ,本文实例讲述了ajax完毕公文异步上传并回显文件有关音讯成效。分享给大家供大家仿照效法,具体如下: 分外十分少说,直接给大家上干货,写的倒霉还请见谅。 本文

皇家赌场网址,本文实例讲述了ajax完毕公文异步上传并回显文件有关音讯成效。分享给大家供大家仿照效法,具体如下:

分外十分少说,直接给大家上干货,写的倒霉还请见谅。

本文为大家大饱眼福了ajax异步上传文件或图表功能的切切实实代码,供大家参谋,具体内容如下

上传文件的新闻

切实代码如下所示:

//html代码

<form enctype="multipart/form-data" id="upForm">
 <input type="file" name="file" ><br><br>
 <input type="button" value="提交">
</form>
<div class="picDis">
 <img src="" alt="皇家赌场网址 1">
</div>




//js代码

(':button').click(function(event) {
  //formdata储存异步上传数据
 var formData = new FormData($('form')[0]);
 formData.append('file',$(':file')[0].files[0]);
 //坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
 $.ajax({
  url:'formtest.php',
  type: 'POST',
  data: formData,
  //这两个设置项必填
  contentType: false,
  processData: false,
  success:function(data){
  console.log(data)
  var srcPath = data;
  console.log();
     //注意这里的路径要根据自己的储存文件的路径设置
  $('.picDis img').attr('src', '..' srcPath);
  }
 })
 });
<div class="form-group">
  <div class="col-sm-4">
  <label class="control-label">应用文件</label>
</div>
<div class="col-sm-8">
  <input type="file" name="appFile" id="appFile">
  <input type="submit" value="确认上传" id="subm">
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<title>Index</title>
<script>
$(function() {
$(':button').click(function () {
var formData = new FormData();
var file = $("input[type='file']")[0].files[0];
formData.append("files", file);
$.ajax({
url: '/Upload/Upload', //server script to process data
type: 'POST',
//Ajax事件
//beforeSend: beforeSendHandler,
//success: completeHandler,
//error: errorHandler,
// Form数据
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data">
<input name="file" type="file" multiple="multiple" />
<input type="button" value="Upload" />
<input type="text" name="userName" value="ice" />
</form>
</body>
</html>

php:

ajax提交

以上代码是小编给大家大饱眼福的Ajax异步上传文件实例代码,希望对大家享有协理,假如大家有疑点应接给小编留言,作者会及时恢复生机我们的,在此也非常多谢我们对台本之家网址的支撑!

<?php 

$upFile = $_FILES['file'];

/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function creaDir($dirPath){
 $curPath = dirname(__FILE__);
 $path = $curPath.'\'.$dirPath;
 if (is_dir($path) || mkdir($path,0777,true)) {
  return $dirPath;
 }
}

//判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
 $dirpath = creaDir('upload');
 $filename = $_FILES['file']['name'];
 $queryPath = './'.$dirpath.'/'.$filename;
 //move_uploaded_file将浏览器缓存file转移到服务器文件夹
 if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
  echo $queryPath;
 }
}

 ?>

本文由68399皇家赌场发布于集成经验,转载请注明出处:Ajax异步上传文件实例代码分享,ajax实现文件异步

关键词: 68399皇家赌场

最火资讯