当前位置: 动力学知识库 > 问答 > 编程问答 >

Keeping Uploaded Images On Page After Refresh (PHP/HTML/JAVASCRIPT)

问题描述:

I'm doing a small project where I'm trying to create a continual gallery for a user; whereby, they upload a file, and it immediately appears on the same page. The one thing I can't manage to accomplish is to keep the files there on the page even if the page is refreshed. In other words, I want the user to return and see all of their uploaded files as if they never left, until they close the browser. I've tried using cookies and session variables but I'm confused on how to implement this. Here is my Code. I APOLOGIZE IN ADVANCE FOR BAD INDENTATION.

My index.php:

<?php

// Process image

$uploadName = 'uploaded/pic.jpg';

if (count($_FILES))

move_uploaded_file($_FILES['image']['tmp_name'], $uploadName);

?>

<!DOCTYPE html>

<html>

<head>

<style>

li { display: inline-block; padding: 200px; width: 200px;}

img { width: 100%; height:100%;}

</style>

<script type="text/javascript">

function iframeSubmit(formElem, action, callback) {

// name a callback that will be called from inside the iframe

var callbackName = 'iframe' + Math.ceil(Math.random() * 10000);

action = action + (action.indexOf('?') == -1 ? '?' : '&') + 'callback='+

callbackName;

// create an iframe and use the callback as its name

var iframe = document.createElement('iframe');

iframe.setAttribute('name', callbackName);

iframe.style.display = 'none';

// add the target and edit the action of the form

formElem.setAttribute('target', callbackName);

formElem.setAttribute('action', action);

// add the hidden iframe after the form

formElem.parentNode.appendChild(iframe);

window[callbackName] = callback;

}

;

</script>

</head>

<body onload="onload()">

<a href="index.php" class="menu_link">Home</a>

<a href="Schedule.html" class="menu_link">Schedule</a>

<form method="post" action="index.php" enctype="multipart/form-data">

<input type="file" name="image"/>

<input type="submit" value="upload"/>

</form>

<ul>

<?php if (count($_FILES)): ?>

<li><img src="<?php echo $uploadName ?>"/></li>

<?php endif; ?>

</ul>

<script type="text/javascript">

function onload() {

}

</script>

<script type="text/javascript">

function processResponse(response) {

if (!response.success) {

alert('woopsie');

return;

}

var newListItem = document.createElement('li');

newListItem.innerHTML = '<img src="' + response.path + '"/>';

document.getElementsByTagName('ul')[0].appendChild(newListItem);

}

function onload() {

iframeSubmit(document.getElementsByTagName('form')[0], 'upload.php',

processResponse);

}

</script>

</body>

</html>

Here is my upload.php:

<?php

enter code here

$imagePath = 'uploaded/pic.jpg';

setcookie("cookie", "stuff", time() + 3600, $uploadName);

move_uploaded_file($_FILES['image']['tmp_name'], $imagePath);

?>

<!DOCTYPE html>

<html>

<head>Iframe content</head>

<body>

<script type="text/javascript">

<?php

echo 'window.parent[\'' . $_GET['callback'] . '\']('

. json_encode(array('success' => true, 'path' => $imagePath)) . ')';

?>

</script>

</body>

</html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: