原生ajax和iframe框架实现图片文件上传的两种方式

前端技术 2023/09/03 AJAX

大家应该可以举出几种常用的异步文件上传功能的实现方式，使用频率较多的有原生ajax和iframe框架，实现图片文件上传，下面就为大家分享图片文件上传的两种方式：原生ajax和iframe框架，供大家参考，具体内容如下

方法一：利用iframe框架上传图片

html代码如下:

<div class=\"frm\">
<form name=\"uploadFrom\" id=\"uploadFrom\" action=\"upload.php\" method=\"post\" target=\"tarframe\" enctype=\"multipart/form-data\">
<input type=\"file\" id=\"upload_file\" name=\"upfile\">
</form>
<iframe src=\"\" width=\"0\" height=\"0\" style=\"display:none;\" name=\"tarframe\"></iframe>
</div>
<div id=\"msg\">
</div>

index.js文件：

$(function(){
$(\"#upload_file\").change(function(){
$(\"#uploadFrom\").submit();
});
});
function stopSend(str){
var im=\"<img src=\'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文件上传

<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上传文件</title>
<meta charset=\"utf-8\">
<script type=\"text/javascript\">
var xhr;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xhr = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
else if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
}
function UpladFile()
{
var fileObj = document.getElementById(\"file\").files[0];
var FileController = \'upload.php\';
var form = new FormData();
form.append(\"myfile\", fileObj);
createXMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open(\"post\", FileController, true);
xhr.send(form);
}
function handleStateChange()
{
if(xhr.readyState == 4)
{
if (xhr.status == 200 || xhr.status == 0)
{
var result = xhr.responseText;
var json = eval(\"(\" + result + \")\");
alert(\'图片链接:n\'+json.file);
}
}
}
</script>
<style>
.txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
.mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #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>
<div class=\"form-group\">
<label class=\"control-label\">图片</label>
<br/>
<input type=\'text\' name=\'textfield\' id=\'textfield\' class=\'txt\' />
<span onclick=\"file.click()\" class=\"mybtn\">浏览...</span>
<input type=\"file\" name=\"file\" class=\"file\" id=\"file\" size=\"28\" onchange=\"document.getElementById(\'textfield\').value=this.value\" />
<span onclick=\"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\"])) //single file
{
$fileName = time().uniqid().\'.\'.pathinfo($_FILES[\"myfile\"][\"name\"])[\'extension\'];
move_uploaded_file($_FILES[\"myfile\"][\"tmp_name\"],$dir.$fileName);
$ret[\'file\'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>

以上就是本文的全部内容，希望对大家学习理解ajax和iframe框架实现图片文件上传有所帮助。

本文地址：https://www.stayed.cn/item/7720

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案