Form no refresh upload picture

Recently do about uploading pictures of the project, found that there is no use of non-Refresh page upload method, are through the traditional upload image jump and then display the picture, which for uploading more than one picture is too not applicable!

Online also have a variety of asynchronous upload plug-ins such as swfupload, such as the larger plug-in, using flash upload, incidentally, a relatively concise AJAX upload image plug-in ajaxfileupload:

Directly on address:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

Now the normal upload mode on the transformation, to achieve no refresh upload

By hiding the IFRAME, the submission will not jump to the new page upload (note the red part)

1) Set the form to a Target property, which jumps to the address when it is submitted

2) Set a a hidden iframe. (Note the name and ID), the content of the upload address output will appear in the IFRAME, in the acquisition of the IFRAME inside the return value (chip address)

Upload part of the page code:

<form action= " upload.php " method= "POST" enctype= "Multipart/form-data" target= "Frshowpic" id= "MyForm" >

<table >

<tr>

<td></td>

<td><input type= "file" name= "Avatar" accept= "image/*" ></td>

</tr>

<tr>

<TD colspan= "2" ><input type= "submit" value= "Upload image" ></td>
</tr>
</table>
</form>
<div id= "img" > Show pictures here </div>

<!--Shadow Collection iframe-->
<iframe id= "Frshowpic" name= "Frshowpic" ></iframe>

<script type= "Text/javascript" >

Used to display the returned result, the function to invoke this display image inside the hidden iframe

function Showpic (msg,status) {

if (status== "OK") {

document.getElementById ("MyForm"). Reset ();

document.getElementById ("img"). InnerHTML = ' ";

}else{

Alert (msg);

}

}

</script>

3) Upload image PHP Address:

Returns the uploaded image address and status

Exit ("<script>window.parent.showpic ('". $newfile. "', ' OK ') </script>");//Generate picture successfully, this content is output to the hidden iframe inside

upload.php

<?php

$savepath = ' avatar/';//upload Directory

$files = Array_keys ($_files);

$fiedname = $files [0];

if (($_files[$fiedname ["type"] = = "Image/gif") | | ($_files[$fiedname ["type"] = = "Image/jpg") | | ($_files[$fiedname ["type"] = = "Image/bmp") | | ($_files[$fiedname ["type"] = = "Image/jpeg") | | ($_files[$fiedname ["type"] = = "Image/pjpeg") | | ($_files[$fiedname ["type"] = = "Image/png") | | ($_files[$fiedname ["type"] = = "Image/x-png"))) {//3m

if ($_files[$fiedname ["Size"] < 1048576*3) {

$extend = Explode (".", $_files[$fiedname ["name"]);

$key = count ($extend)-1;

$imgtype = ".". $extend [$key];

$newfilename = Uniqid (). Date ("Ymdhis"). Time ();

$newfile = $newfilename. $imgtype;

if (!is_dir ($savepath)) {

mkdir ($savepath, 0777,true);

}

$orgin _image_location = $savepath. " Org_ ". $newfile;//Original

Upload a larger image

$pic = Move_uploaded_file ($_files[$fiedname ["Tmp_name"], $orgin _image_location);

chmod ($orgin _image_location, 0777);

@unlink ($_files[$fiedname ["Tmp_name"]);

if (file_exists ($orgin _image_location)) {

Exit ("<script>window.parent.showpic ('". $newfile. "', ' OK ') </script>");//Generate Picture Success

}else{

Exit ("<script>window.parent.showpic (' upload failed ', ' Error4 ') </script>");

}

}else{

Exit ("<script>window.parent.showpic (' picture too big ', ' Error2 ') </script>");

}

}else {
Exit ("<script>window.parent.showpic (' incorrect image type ', ' Error1 ') </script>");
}
?>

by CXR

Sync Blog: http://www.cnblogs.com/newbalanceteam/p/4849859.html

This article is from the "Hanyubin-Boulevard from Life" blog, please be sure to keep this source http://byteh.blog.51cto.com/141786/1725403

Form no refresh upload picture