这是昨天在应用开发时用到的一款ajax图片上传功能了,方法很简单的就是把文件利用js给iframe来直接上传,如果上传文件成功返回1,再用js判断是否上传成功如果是就输出图片并显示预览效果,代码如下:
- <!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图片上传失败，请联系开发人员!</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/';
-
- $result = 0;
-
- $target_path = $destination_path . basename( $_files['myfile']['name']);
-
- if(@move_uploaded_file($_files['myfile']['tmp_name'], $target_path)) {
- $result = 1;
- }
- echo $target_path;
- sleep(1);
-
-
- ?>
- <script language="javascript" type="text/javascript">window.top.window.stopupload(<?php echo $result; ?>,'<?=$target_path?>');</script>
|
