這是昨天在應(yīng)用開發(fā)時用到的一款ajax圖片上傳功能了,方法很簡單的就是把文件利用js給iframe來直接上傳,如果上傳文件成功返回1,再用js判斷是否上傳成功如果是就輸出圖片并顯示預(yù)覽效果,代碼如下:
- <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=gb2312" />
- <title>ajax文件上傳</title>
- <style type="text/css">
- #f1_upload_process { display:none;}
- </style>
- <script language="javascript" type="text/javascript">
- <!--
- function $(id)
- {
- return document.getelementbyid(id);
- }
- function startupload(){
- if( $('myfile').value =='' )
- {
- alert('請選擇要上傳圖片！');
- return false;
- }
- var array = $('myfile').value.split('.');
- var ext = array[1].tolowercase();
- if( ext =="gif" || ext =="jpg" || ext =="png" )
- {
- $('f1_upload_process').style.display = 'block';
- $('f1_upload_form').style.display = 'block';
- return true;
- }
- else
- {
- alert('只允許上傳gif jpg png格式圖像文件！');
- return false;
- }
- }
- function stopupload(success,pic){
- var result = '';
- if (success ==1 ){
- result ='<img src='+pic+' />';
- $('logo').value=pic;
- }
- else {
- result = '<span class="emsg">logo圖片上傳失敗，請聯(lián)系開發(fā)人員!</span><br/><br/>';
- }
- $('f1_upload_process').style.display = 'none';
- $('f1_upload_form').innerhtml = result + '<br /><label><input name="myfile" type="file" size="30" /></label><label><input type="submit" name="submitbtn" class="sbtn" value="上傳圖片" /></label>';
- $('f1_upload_form').style.display = 'block';
- return true;
- }
- //-->
- </script>
- </head>
- <body>
- <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="javascript：return startupload();" >
- <span id="f1_upload_process"><img src="loader.gif" /></span>
- <span id="f1_upload_form" align="center">
- <input name="myfile" type="file" id="myfile" size="30" />
- <input type="submit" name="submitbtn" class="sbtn" value="上傳圖片" />
- </span>
- <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
- (可上傳 gif,jpg,png)
- </form>
- </body>
- </html>
upload.php,代碼如下:
- <?php
- $destination_path = '../../upfile/jianjulogo/';//getcwd().directory_separator;
- $result = 0;
- $target_path = $destination_path . basename( $_files['myfile']['name']);
- if(@move_uploaded_file($_files['myfile']['tmp_name'], $target_path)) {//開源代碼Vevb.com
- $result = 1;
- }
- echo $target_path;
- sleep(1);
- ?>
- <script language="javascript" type="text/javascript">window.top.window.stopupload(<?php echo $result; ?>,'<?=$target_path?>');</script>
新聞熱點
疑難解答
