I have create a file index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="ajaxupload.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var thumb = $('#thumb');
new AjaxUpload('imageUpload', {
action: $('form#newHotnessForm').attr('action'),
name: 'image',
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
},
onComplete: function(file, response) {
thumb.load(function(){
$('div.preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src', response);
}
});
});
</script>
<style>
span.wrap { padding: 10px; }
span.wrap.hotness { margin-left: 30px; }
span.wrap.old-and-busted { width: 358px; }
span.wrap button { display: block; margin-top: 10px; }
span.wrap label { margin-bottom: 5px; }
div.preview { float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC; }
div.preview.loading { background: url(/playground/images/loading.gif) no-repeat 39px 40px; }
div.preview.loading img {display: none; }
div.highlight { margin-bottom: 20px; }
span.wrap form { margin: 0; }
</style>
</head>
<body>
<div class="seven columns">
<div class="preview"> <img width="100px" height="100px" src="" id="thumb"> </div>
<span class="wrap hotness">
<form action="save.php" id="newHotnessForm" enctype="multipart/form-data">
<label>Upload a Picture of Yourself</label>
<input type="file" size="20" id="imageUpload" class="">
<button class="button" type="submit">Save</button>
</form>
</span>
</div>
</body>
</html>
Now i have create save.php
if(isset($_FILES["image"]["name"]))
move_uploaded_file($_FILES["image"]["tmp_name"], $_FILES["image"]["name"]);
echo $_FILES["image"]["name"];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="ajaxupload.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var thumb = $('#thumb');
new AjaxUpload('imageUpload', {
action: $('form#newHotnessForm').attr('action'),
name: 'image',
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
},
onComplete: function(file, response) {
thumb.load(function(){
$('div.preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src', response);
}
});
});
</script>
<style>
span.wrap { padding: 10px; }
span.wrap.hotness { margin-left: 30px; }
span.wrap.old-and-busted { width: 358px; }
span.wrap button { display: block; margin-top: 10px; }
span.wrap label { margin-bottom: 5px; }
div.preview { float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC; }
div.preview.loading { background: url(/playground/images/loading.gif) no-repeat 39px 40px; }
div.preview.loading img {display: none; }
div.highlight { margin-bottom: 20px; }
span.wrap form { margin: 0; }
</style>
</head>
<body>
<div class="seven columns">
<div class="preview"> <img width="100px" height="100px" src="" id="thumb"> </div>
<span class="wrap hotness">
<form action="save.php" id="newHotnessForm" enctype="multipart/form-data">
<label>Upload a Picture of Yourself</label>
<input type="file" size="20" id="imageUpload" class="">
<button class="button" type="submit">Save</button>
</form>
</span>
</div>
</body>
</html>
Now i have create save.php
if(isset($_FILES["image"]["name"]))
move_uploaded_file($_FILES["image"]["tmp_name"], $_FILES["image"]["name"]);
echo $_FILES["image"]["name"];
?>
No comments:
Post a Comment