日期:2014-05-17 浏览次数:20473 次
今天用PHP做了个文件上传工具,功能还是很完善滴,如下:
每个图片上传之后,都有自己的地址,改变原图位置或重命名时,将不会重复上传。
一、功能:
A:文件分类上传
B:生成相应的文件夹,如本例,选择团,生成文件夹tuan
C:点击图片,查看详细
二、HTML代码:
<div id="container"> <fieldset> <legend class="img"><img width="100%" src="css/logo.png" /></legend> <form action="" method="post" name="myform" id="myform" onsubmit="return false" enctype="multipart/form-data"> <strong>亲,请选择你要上传的文件</strong> <div class="file"><input type="file" id="fileToUpload" name="fileToUpload" /></div> <select id="product"> <option value="" <?php if(empty($pname)){ echo "selected" ;} ?> >请选择产品</option> <option value="tuan" <?php if($pname == '2000tuan'){ echo "selected" ;} ?> >团</option> </select> <button id="postBtn" >Submit</button> </form> <div id="info"></div> <div style="position:relative; top:40px; left:20px;"> <a id="loading" style="display:none"><img width="10%" src="css/loading.gif" /></a> </div> <a href="#" id="img_link" target="_blank"> <div id="img_url">buding</div> <br/> <img class="preview" id="preview" src="" style="display:none;margin:0 auto" /> </a> </fieldset> </div>
三、Javascript代码:
<script type="text/javascript"> $('#postBtn').click(function(){ $('#preview').hide(); $('#img_url').hide(); $('#loading') .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); }); if($('#fileToUpload').val() == ""){ $('#info').html("亲,还没选择文件呢"); var jObject={"Url":"","Height":413}; var jString=JSON.stringify(jObject); window.parent.postMessage(jString,'*'); return false; } if($('#product').val() == ""){ $('#info').html("亲,还没选择产品呢"); $('#info').css("color","#e9af32"); var jObject={"Url":"","Height":413}; var jString=JSON.stringify(jObject); window.parent.postMessage(jString,'*'); return false; } var val = $('#product').val(); $.ajaxFileUpload({ url:'ajaxupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'text', data:{product:val}, success: function (data, status) { if(data.search(/http:\/\//i) < 0 ){ $('#info').html(data); var jObject={"Url":"","Height":413}; var jString=JSON.stringify(jObject); window.parent.postMessage(jString,'*'); }else{ $('#info').html("您上传的文件为:<br/>"); $('#preview').attr("src",data); $('#img_link').attr("href",data); $('#img_url').html(data); $('#preview').show(); $('#img_url').show(); $('#preview').load(function(){ var imgH=$('#preview').height(); var