Home>

There are several commonly used asynchronous file upload functions,More common, such as using the iframe frame form,ajax function effect,And flash + php function,

There are several commonly used asynchronous file upload functions,More common, such as using the iframe frame form,ajax function effect,And flash + php function, the following introduces the example of ajax and iframe to implement asynchronous file upload function.

Method one, use jquery ajaxfileupload.js to implement file upload

In fact, it is to achieve a non-refreshing file upload.You can use the iframe file upload principle.

Actually when uploading files with php.. . Only $_files can be used, but if we only use js to get its id, such as.. document.getelementbyid ("img"). Value or $("jquery #img ") are not actually uploaded (but many people still do this,I did the same at the beginning).

process:

(1) The code of the front-end file:test.php

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxfileupload ()
{
$.ajaxfileupload
(
{
url:"doajaxfileupload.php", // The server that handles uploading files
secureuri:false,fileelementid:"img",datatype:"json",success:function (data)
{
alert (data.file_infor);
}
}
)
return false;
}
</script>
</p>
<p>
The corresponding html is:
</p>
<p>
<input type="file" size="45" name="img">
<button onclick="return ajaxfileupload ();">upload</button>

This completes the client.

(2) doajaxfileupload.php on the server side

In order to simply check whether the value is actually passed over here,You can save it.

$file_infor=var_export ($_ files, true);
file_put_contents ("d:file_infor.php". $file_infor);

When you call the file_infor.php file that you just generated, you see the familiar information again:

array (
"name" =>"lamp.jpg","type" =>"image/pjpeg","tmp_name" =>"c:windowstempphpfa.tmp","error" =>0,"size" =>3127
)

Of course, the real processing class is like this:

<?Php
$upfilepath="d:/";
$ok [email protected]_uploaded_file ($_ files ["img"] ["tmp_name"], $upfilepath);
if ($ok === false) {
echo json_encode ("file_infor" =>"Upload failed");
} else {
echo json_encode ("file_infor" =>"Upload succeeded");
}
?>

Method two, upload images using iframe

The html code is as follows:

<div>
<form name="uploadfrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" name="upfile">
</form>
<iframe src="" width="0" height="0" name="tarframe"></iframe>
</div>
<div>
</div>

index.js file:

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

upload.php file:

<?Php
$file=$_ files ["upfile"];
$name=rand (0,500000) .dechex (rand (0,10000)). ". jpg";
move_uploaded_file ($file ["tmp_name"], "upload/images /".$name);
// Call the js function of the iframe parent window
echo "<script>parent.stopsend (" $name ")</script>";
?>

Method three, the original ecological ajax file upload

<! Doctype html>
<html>
<head>
<title>html5 ajax upload file</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 ("Image link: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>
<label>picture</label>
<br />
<input type="text" name="textfield" />
<span onclick="file.click ()">Browse ...</span>
<input type="file" name="file" size="28" onchange="document.getelementbyid (" textfield "). Value=this.value" />
<span onclick="upladfile ()">upload</span>
</div>
</body>
</html>

php code:

<?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);
}
?>
php
  • Previous Solution to the error that the CI framework automatically loads the session
  • Next Introduction to the use of rsBookMark in asp