Ajax and iframe framework implement image file upload (detailed graphic and text explanation)

This time I will bring you the ajax and iframe framework to implement picture File upload (detailed picture and text explanation), the notes of ajax and iframe framework to implement image file upload, what are the following? This is a practical case, let’s take a look at it.

You should be able to cite several commonly used 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 with you two ways to upload image files. One way: 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>
</p>

<p> </p>

index.js file:

$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img  alt="Ajax and iframe framework implement image file upload (detailed graphic and text explanation)" >";
$("#msg").append(im);
}

upload.php file:

<php move_uploaded_file echo>parent.stopSend('$name')";
?></php>

Method 2: Original ajax file upload

nbsp;html>


<title>Html5 Ajax 上传文件</title>
<meta>
<script>
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>


<p>
<label>图片</label>
<br>
<input>
<span>浏览...</span>
<input>
<span>上传</span>
</p>

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);
}
?>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Ajax verification user name (detailed graphic and text explanation)

How to improve user experience beforeSend

The above is the detailed content of Ajax and iframe framework implement image file upload (detailed graphic and text explanation). For more information, please follow other related articles on the PHP Chinese website!