Sunday, November 20, 2016

Image Upload with preview

HTML SCRIPT

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Attached Prescription</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="../bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#images').on('change',function(){
$('#multiple_upload_form').ajaxForm({
target:'#images_preview',
beforeSubmit:function(e){
$('.uploading').show();
},
success:function(e){
$('.uploading').hide();
},
error:function(e){
}
}).submit();
});
});
</script>
</head>
<body style="">
<div style="margin-left:80px;">
<div class="upload_div">
    <form method="post" name="multiple_upload_form" id="multiple_upload_form" enctype="multipart/form-data" action="upload.php">
    <input type="hidden" name="image_form_submit" value="1" />
<div style="padding:20px;"></div>
        <input type="file" name="images[]" id="images" multiple class="btn btn-success "  style="margin-top:30">
        <div class="uploading none">
            <label>&nbsp;</label>
            <img src="uploading.gif"/>
        </div>
    </form>
<div class="gallery" id="images_preview" ></div>
<input type="button" onclick="SetAttachement()" value="Attached" class="btn btn-success " style="margin-top:20px">
    </div>
</div>
<script type="text/javascript">
function SetAttachement() {
if (window.opener != null && !window.opener.closed) {
var attachement = window.opener.document.getElementById("imgurl");
var attachement1 = window.opener.document.getElementById("pimgurl");
attachement.value = document.getElementById("cimgurl").value;
attachement1.value = document.getElementById("cimgurl").value;
}
window.close();
alert("Successfully attached.");
}
</script>
</body>
</html>



PHP SCRIPT


<?php
if($_POST['image_form_submit'] == 1)
{
$site_add ="https://store.nostlgc.com/catalog/view/theme/journal2/template/product/Prescription/UploadImage/";
$images_arr = array();
foreach($_FILES['images']['name'] as $key=>$val){
$image_name = $_FILES['images']['name'][$key];
$tmp_name = $_FILES['images']['tmp_name'][$key];
$size = $_FILES['images']['size'][$key];
$type = $_FILES['images']['type'][$key];
$error = $_FILES['images']['error'][$key];
$target_dir = "uploads/"; //Image location that are uploaded
$target_file = $target_dir.$_FILES['images']['name'][$key];
if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
$images_arr[] = $target_file;
}
}
//Generate images view
if(!empty($images_arr)){ $count=0;
foreach($images_arr as $image_src){ $count++?>
<ul class="reorder_ul reorder-photos-list">
<input type="hidden" id="cimgurl" name="cimgurl" value="<?php echo $site_add . $image_src; ?>" >
            <li id="image_li_<?php echo $count; ?>" class="ui-sortable-handle">
                <a href="javascript:void(0);" style="float:none;" class="image_link"><img src="<?php echo $image_src; ?>" alt=""></a>
                </li>
          </ul>

<?php }
}
}
?>