js--获取表单的type=file

$('#video_file')[0].files[0]

#video_file = <input type='file' id='video_file'> ; files是固定的

console.log()打印出来是

说明：

一旦你有了一个<input type="file">元素的应用
你就可以访问一个叫做FileList的对象，这是HTML5新规范的一部分
（HTML5 File API 的一部分）
FileList对象是文件的集合
更具体地说，它是File对象的集合
File对象有以下属性：

name - 文件名称（包含任意路径）
type - 文件MIME类型（小写）
size - 文件字节大小

XMLHttpRequest对象已经得到HTML5规范的扩展
特别是XMLHttpRequest的2级标准（目前最新版本）
已经包括了以下新特点：

处理字节流（如File、Blob和FormData对象在上传/下载过程中）
上传/下载过程中的进度事件
跨域请求
匿名请求（不发送HTTP请求）
超时请求

接下来就是上代码看例子：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>上传文件</title> 
  <script src='jquery-2.0.2.min.js'></script>
  <script type="text/javascript"> 
$(document).ready(function(){
    var inputCover = $(".inputCover");
    var processNum = $(".processNum");
    var processBar = $(".processBar");
    //上传准备信息
    $("#file").change(function(){
        var file = document.getElementById('file');
        var fileName = file.files[0].name;
		var fileSize = file.files[0].size;
        processBar.css("width",0); 
        //验证要上传的文件
		if(fileSize > 1024*30*1024){
			inputCover.html("<font>文件过大，请重新选择</font>");
			processNum.html('未选择文件');
			document.getElementById('file').value = '';
			return false;
		}else{
			inputCover.html(fileName+' / '+parseInt(fileSize/1024)+'K');
			processNum.html('等待上传');
		}
    })
 
    //提交验证
    $(".submit").click(function(){
	if($("#file").val() == ''){
            alert('请先选择文件！');
	}else{
	    upload();
	}
    })
 
    //创建ajax对象，发送上传请求
    function upload(){
        var file = document.getElementById('file').files[0];
		var form = new FormData();
		form.append('myfile',file);
		$.ajax({
			url: 'upload.php',//上传地址
			async: true,//异步
			type: 'post',//post方式
			data: form,//FormData数据
			processData: false,//不处理数据流 !important
			contentType: false,//不设置http头 !important
			xhr:function(){//获取上传进度            
					myXhr = $.ajaxSettings.xhr();
					if(myXhr.upload){
						myXhr.upload.addEventListener('progress',function(e){//监听progress事件
						var loaded = e.loaded;//已上传
							var total = e.total;//总大小
							var percent = Math.floor(100*loaded/total);//百分比
							processNum.text(percent+"%");//数显进度
							processBar.css("width",percent+"px");//图显进度}, false);
						})
					return myXhr;
					}
				},
			success: function(data){//上传成功回调
							console.log("文档当前位置是："+data);//获取文件链接
							document.cookie = "url="+data;//此行可忽略
							$(".submit").text('上传成功');
							$(".upagain").css("display","block");
				}
		})
    }
 
    //继续上传
    $(".upagain").click(function(){
		$("#file").click();
		processNum.html('未选择文件');
		processBar.css("width",0); 
		$(".submit").text('上传');
		document.getElementById('file').value = '';
		$(this).css("display","none");
    })
})
  </script> 
  <style type="text/css">
*{
    font-family: 'microsoft yahei';
    color: #4A4A4A;
}
.upload{
    width: 700px;
    padding: 20px;
    border: 1px dashed #ccc;
    margin: 100px auto;
    border-radius: 5px;
}
.uploadBox{
    width: 100%;
    height: 35px;
    position: relative;
}
.uploadBox input{
    width: 200px;
    height: 30px;
    background: red;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 201;
    opacity: 0;
    cursor: pointer;
}
.uploadBox .inputCover{
    width: 200px;
    height: 30px;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 200;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border: 1px solid #009393;
    border-radius: 5px;
    cursor: pointer;
}
.uploadBox button.submit{
    width: 100px;
    height: 30px;
    position: absolute;
    left: 230px;
    top: 2px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #F0F0F0;
    outline: none;
    cursor: pointer;
}
.uploadBox button.submit:hover{
    background: #E0E0E0;
}
.uploadBox button.upagain{
    width: 100px;
    height: 30px;
    position: absolute;
    left: 340px;
    top: 2px;
    display: none;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #F0F0F0;
    outline: none;
    cursor: pointer;
}
.uploadBox button.upagain:hover{
    background: #E0E0E0;
}
.processBar{
    display: inline-block;
    width: 0;
    height: 7px;
    position: absolute;
    left: 500px;
    top: 14px;
    background: #009393;
}
.processNum{
    position: absolute;
    left: 620px;
    color: #009393;
    font-size: 12px;
    line-height: 35px;
} 
  </style> 
</head> 
<body> 
<div class="upload"> <div class="uploadBox">
    <span class="inputCover">选择文件</span>
	<form enctype="">
	    <input type="file" name="file" id="file" />
	    <button type="button" class="submit">上传</button>
	</form>
	<button type="button" class="upagain">继续上传</button>
	<span class="processBar"></span>
	<span class="processNum">未选择文件</span>
    </div>
</div> 
</body> 
</html>

<?php  
if(isset($_FILES["myfile"])){  
    move_uploaded_file($_FILES["myfile"]["tmp_name"],"ajax/".$_FILES["myfile"]["name"]);
    echo "http://www.xuxiangbo.com/ajax/".$_FILES["myfile"]["name"];
}else{
    echo 'no file';
}
?>

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>上传文件</title> 
  <script type="text/javascript"> 
    function sub() { 
      var obj = new XMLHttpRequest(); 
      obj.onreadystatechange = function() { 
        if (obj.status == 200 && obj.readyState == 4) { 
          document.getElementById('con').innerHTML = obj.responseText; 
        } 
      } 
      // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态 
      obj.upload.onprogress = function(evt) { 
        // 上传附件大小的百分比 
        var per = Math.floor((evt.loaded / evt.total) * 100) + "%"; 
        // 当上传文件时显示进度条 
        document.getElementById('parent').style.display = 'block'; 
        // 通过上传百分比设置进度条样式的宽度 
        document.getElementById('son').style.width = per; 
        // 在进度条上显示上传的进度值 
        document.getElementById('son').innerHTML = per; 
      } 
      // 通过FormData收集零散的文件上传信息 
      var fm = document.getElementById('userfile3').files[0]; 
      var fd = new FormData(); 
      fd.append('userfile', fm); 
      obj.open("post", "upload.php"); 
      obj.send(fd); 
    } 
  </script> 
  <style type="text/css">
    #parent { 
      width: 200px; 
      height: 20px; 
      border: 2px solid gray; 
      background: lightgray; 
      display: none; 
    }
    #son { 
      width: 0; 
      height: 100%; 
      background: lightgreen; 
      text-align: center; 
    } 
  </style> 
</head> 
<body> 
  <h2>Ajax实现进度条文件上传</h2> 
  <div id="parent"> 
    <div id="son"></div> 
  </div> 
  <p id="con"></p> 
  <input type="file" name="userfile" id="userfile3"><br><br> 
  <input type="button" name="btn" value="文件上传" onclick="sub()"> 
</body> 
</html>

<?php  
  // 上传文件进行简单错误过滤 
  if ($_FILES['userfile']['error'] > 0) { 
    exit("上传文件有错".$_FILES['userfile']['error']); 
  } 
  // 定义存放上传文件的真实路径 
  $path = './upload/'; 
  // 定义存放上传文件的真实路径名字 
  $name = $_FILES['userfile']['name']; 
  // 将文件的名字的字符编码从UTF-8转成GB2312 
  $name = iconv("UTF-8", "GB2312", $name); 
  // 将上传文件移动到指定目录文件中 
  if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) { 
    echo "文件上传成功"; 
  } else { 
    echo "文件上传失败"; 
  } 
 ?>

对比上面的代码第一个是jq第二个js

js--获取表单的type=file

$('#video_file')[0].files[0]

说明：

猜你喜欢