Skip to content

Instantly share code, notes, and snippets.

@tranquangchau

tranquangchau/index.html

Created March 7, 2017 16:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tranquangchau/0acd06e2b08bf1e11f9936ae18501997 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tranquangchau/0acd06e2b08bf1e11f9936ae18501997 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<style>
body {
font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
padding:10px;
}
h1 {
margin-top:0;
}
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
</style>
</head>
<body>
<div id="main">
<h1>Upload Your Images</h1>
<form id="my-form" method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
</form>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$( '#my-form' )
.submit( function( e ) {
$.ajax( {
url: 'upload.php',
type: 'POST',
data: new FormData( this ),
processData: false,
contentType: false
} );
e.preventDefault();
} );
</script>
</body>
</html>
Raw
xuly.php
<?php
//var_dump($_FILES);die;
if(!$_FILES["images"]["error"]){
$name = $_FILES["images"]["name"];
move_uploaded_file( $_FILES["images"]["tmp_name"], "uploads/" . $_FILES['images']['name']);
echo 'ok';
}else{
echo 'false';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment