My previous post I have is basically working and will teach you how to open a dialog box and select the file you want to upload with a styled layout.
However, the problem on IE is that it doesn't accept the approach of jQuery or Javascript, that triggers the click event of the input file element that causes an error "Access is Denied" when submitted.
Good thing I was able to find a way to trick IE. Please see below on how I do it and hopefully will be able help developers.
First, we need to understand what IE's requirement are to make it work. So, basically for the file upload to work on IE, the user should have to click on the input file element without using jQuery or Javascript to do it for us.
Given the requirement of IE and the style to put in, the best solution for me is to use CSS opacity and z-index.
In logic, what you need to do is #1. set your input file element on top of your styled textbox using z-index, this is for user to be able to click the file input element. #2. set the input file element as invisible using the opacity equal to zero "0", this is to hide the input file element and the styled textbox will be visible instead. That way, we can satisfy IE and at the same time, be able to style the file upload.
As for the sample script I made, please see below.
The sample compose of 2 scripts: index.html and upload.php
index.php
<html>
<head>
<title>File Upload</title>
<style type="text/css">
div.inputContainer {
position: relative;
}
div.inputStyled {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.inputHide {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#docufile').change(function() {
var vals = $(this).val();
val = vals.length ? vals.split('\\').pop() : '';
$('#document').val(val);
});
$('#btnSubmit').click(function() {
$('#frmAdd').submit();
});
});
</script>
</head>
<body>
<form id="frmAdd" name="frmAdd" action="upload.php" method="post" enctype="multipart/form-data" encoding="multipart/form-data">
<div class="inputContainer">
<div class="inputStyled">
<input name="document" id="document" type="text">
<input name="button" type="button">
</div>
<input type="file" class="inputHide" name="docufile" id="docufile"/>
</div>
<input type="submit" value="submit" id="btnSubmit"/>
</form>
</body>
</html>
upload.php
<?php
$docufile = '';
if (@$_FILES['docufile']['tmp_name']) {
$docufile = upload_file($_FILES['docufile']);
}
echo $docufile;
function upload_file($docu=null) {
$upload_dir = "files/";
$docu_file='';
if (!$docu['error'] == 0) return '';
if (!@is_uploaded_file($docu['tmp_name'])) return '';
$filename = preg_replace("/\s+/", "", $docu['name']);
if (!file_exists($upload_dir.$filename)) {
$docu_file = $filename;
} else {
$rand = 1;
while(file_exists($upload_dir.$rand."-".$filename)) {
$rand ++;
}
$docu_file = $rand."-".$filename;
}
$upload_file = $upload_dir.$docu_file;
if (!@move_uploaded_file($docu['tmp_name'], $upload_file)) {
return '';
}
return $docu_file;
}
?>
Quote for the day:If you want to reach your potential, you need to add a strong work ethic to your talent. If you want something out of your day, you must put something in it. Your talent is what God put in before you were born. Your skills are what you put in yesterday. Commitment is what you just put in today in order to make today your masterpiece and make tomorrow a success. - john m.
