|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>AJAX image upload with, jQuery</title>
|
|
<script type="text/javascript" src="jquery.min.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
function append_img(img_url){
|
|
alert(1);
|
|
window.parent.document.getElementById('img').src=img_url;
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<p id="msg"></p>
|
|
|
|
<input type="file" id="file" name="file" multiple />
|
|
|
|
<img alt='' id='img' />
|
|
<button id="upload">Upload</button>
|
|
<button id="done">done</button>
|
|
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function (e) {
|
|
$('#upload').on('click', function () {
|
|
var file_data = $('#file').prop('files')[0];
|
|
window.console && console.log(file_data);
|
|
var form_data = new FormData();
|
|
form_data.append('file', file_data);
|
|
$.ajax({
|
|
url: 'test9.php', // point to server-side controller method
|
|
dataType: 'text', // what to expect back from the server
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
data: form_data,
|
|
type: 'post',
|
|
success: function (response) {
|
|
if(response)
|
|
window.parent.document.getElementById('img').src=response;
|
|
//$('#msg').html(response); // display success response from the server
|
|
console.log(response);
|
|
},
|
|
error: function (response) {
|
|
$('#msg').html(response); // display error response from the server
|
|
}
|
|
});
|
|
|
|
//$('#img').attr('src',file_data);
|
|
});
|
|
|
|
}
|
|
|
|
);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|