Home > Article > Web Front-end > Two ways to upload image files using native ajax and iframe frameworks

Two ways to upload image files using native ajax and iframe frameworks

韦小宝Original: 2018-01-10 09:57:091573browse

This article mainly introduces in detail the two methods of native ajax and iframe frameworks to implement image file upload. Friends who are not familiar with ajax file upload and are interested in ajax upload can refer to it. Take a look at this article

You should be able to cite several common ways to implement the asynchronous file upload function. The more frequently used methods are native ajax and iframe frameworks to achieve image file upload. Below, I will share the images with you. There are two ways to upload files: native ajax and iframe framework, for your reference, the specific content is as follows

Method 1: Use the iframe framework to upload images

html code is as follows:

<p 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>
</p>
<p id="msg">
</p>

index.js file:

$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img src=&#39;upload/images/"+str+"&#39;>";
$("#msg").append(im);
}

upload.php file:

<php
$file=$_FILES[&#39;upfile&#39;];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file[&#39;tmp_name&#39;],"upload/images/".$name);
//调用iframe父窗口的js 函数
echo "<script>parent.stopSend(&#39;$name&#39;)</script>";
?>

##Method 2: Original ajax file upload

<!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 = &#39;upload.php&#39;;
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(&#39;图片链接:n&#39;+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>
<p class="form-group">
<label class="control-label">图片</label>
<br/>
<input type=&#39;text&#39; name=&#39;textfield&#39; id=&#39;textfield&#39; class=&#39;txt&#39; />
<span onclick="file.click()" class="mybtn">浏览...</span>
<input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById(&#39;textfield&#39;).value=this.value" />
<span onclick="UpladFile()" class="mybtn">上传</span>
</p>
</body>
</html>

php code:

<?php
if(isset($_FILES["myfile"]))
{
$ret = array();
$uploadDir = &#39;images&#39;.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().&#39;.&#39;.pathinfo($_FILES["myfile"]["name"])[&#39;extension&#39;];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret[&#39;file&#39;] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>

The above is the content of this article The entire content, I hope it will be helpful for everyone to learn and understand the ajax and iframe frameworks to upload image files.

Related recommendations:

Use AJAX to complete the asynchronous verification of the user name. Detailed example

jquery and iframe to create an ajax upload effect Example sharing

jQuery Ajax uses FormData to upload files and other data examples

The above is the detailed content of Two ways to upload image files using native ajax and iframe frameworks. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Usage example of jQuery compound event combined with toggle()Next article：Usage example of jQuery compound event combined with toggle()

See more

Two ways to upload image files using native ajax and iframe frameworks

Related articles