原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式，使用频率较多的有原生ajax和iframe框架，实现图片文件上传，下面就为大家分享图片文件上传的两种方式：原生ajax和iframe框架，供大家参考，具体内容如下
方法一：利用iframe框架上传图片
html代码如下:
<divclass="frm"> <formname="uploadFrom"id="uploadFrom"action="upload.php"method="post"target="tarframe"enctype="multipart/form-data"> <inputtype="file"id="upload_file"name="upfile"> </form> <iframesrc=""width="0"height="0"style="display:none;"name="tarframe"></iframe> </div> <divid="msg"> </div>
index.js文件：
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
functionstopSend(str){
varim="<imgsrc='upload/images/"+str+"'>";
$("#msg").append(im);
}
upload.php文件：
<php
$file=$_FILES['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//调用iframe父窗口的js函数
echo"<script>parent.stopSend('$name')</script>";
?>
方法二：原生态ajax文件上传
<!DOCTYPEhtml>
<html>
<head>
<title>Html5Ajax上传文件</title>
<metacharset="utf-8">
<scripttype="text/javascript">
varxhr;
functioncreateXMLHttpRequest()
{
if(window.ActiveXObject)
{
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest)
{
xhr=newXMLHttpRequest();
}
}
functionUpladFile()
{
varfileObj=document.getElementById("file").files[0];
varFileController='upload.php';
varform=newFormData();
form.append("myfile",fileObj);
createXMLHttpRequest();
xhr.onreadystatechange=handleStateChange;
xhr.open("post",FileController,true);
xhr.send(form);
}
functionhandleStateChange()
{
if(xhr.readyState==4)
{
if(xhr.status==200||xhr.status==0)
{
varresult=xhr.responseText;
varjson=eval("("+result+")");
alert('图片链接:n'+json.file);
}
}
}
</script>
<style>
.txt{height:28px;border:1pxsolid#cdcdcd;width:670px;}
.mybtn{background-color:#FFF;line-height:14px;vertical-align:middle;border:1pxsolid#CDCDCD;height:30px;width:70px;}
.file{position:absolute;top:0;right:80px;height:24px;filter:alpha(opacity:0);opacity:0;width:260px}
</style>
</head>
<body>
<divclass="form-group">
<labelclass="control-label">图片</label>
<br/>
<inputtype='text'name='textfield'id='textfield'class='txt'/>
<spanonclick="file.click()"class="mybtn">浏览...</span>
<inputtype="file"name="file"class="file"id="file"size="28"onchange="document.getElementById('textfield').value=this.value"/>
<spanonclick="UpladFile()"class="mybtn">上传</span>
</div>
</body>
</html>
php代码：
<?php
if(isset($_FILES["myfile"]))
{
$ret=array();
$uploadDir='images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$dir=dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir)||(mkdir($dir,0777,true)&&chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"]))//singlefile
{
$fileName=time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret['file']=DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echojson_encode($ret);
}
?>
以上就是本文的全部内容，希望对大家学习理解ajax和iframe框架实现图片文件上传有所帮助。