Originally wanted to upload pictures with the plugin, and then wrote a simple JS to achieve asynchronous image upload, not much to say on the code is easy
upload.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);
}
?>
Index.html
<! DOCTYPE html>
<TITLE>HTML5 Ajax Uploading Files </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 = = | | xhr.status = = 0)
{
var result = Xhr.responsetext;
var json = eval ("(" + result + ")");
Alert (' Picture 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>
<body>
<div class= "Form-group" >
<label class= "Control-label" > Pictures </label>
<br/>
<input type= ' text ' name= ' TextField ' id= ' textfield ' class= ' txt '/>
<span onclick= "File.Click ()" class= "mybtn" > Browse ...</span>
<input type= "File" name= "file" class= "file" id= "file" size= "onchange=" document.getElementById (' TextField '). Value=this.value "/>
<span onclick= "Upladfile ()" class= "mybtn" > Uploads </span>
</div>
</body>
JS php xmlrequest upload image