PDA

View Full Version : Interactive Photo Gallery (Details Below)



Finery Workshop
02-13-2015, 03:45 AM
Hello! I'm working on a "store" type page where my members can upload pictures and name their "price" for the picture. (My website is where you can make virtual clothes and sell them and such. But that part isn't very important for this.)

I'm not very experienced in Javascript, but I'm pretty good at CSS and HTML. I was wondering if one of you know how to help me?
Basically, I want to have a form where people (my members, but I don't need to have a way where only my members can do it. I'll just make it where only members can access the page.) can upload their designs onto the photo gallery.
I don't know if it's too complicated but yeah.

Here's the code I have for the upload image:


<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0]
if (file) {
var fileSize = 0;
if (size.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}

function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST","upload.php");
xhr.send(fd);
}

function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}

function uploadComplete(evt) {
/*This event is raised when the server send back a response*/
alert(evt.target.responseText);
}

function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}

function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">

<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br /> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" />
</div>

<div id="fileName">

</div>

<div id="fileSize">

</div>

<div id="FileType">

</div>

<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>

<div id="progressNumber">

</div>

</form>