您的位置：首页 > 编程技术 > php  >  ajax文件上传

ajax文件上传

 更新时间：2016年11月25日 16:27  点击：1774
这是昨天在应用开发时用到的一款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="网页特效" 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/';//getcwd().directory_separator;

   $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>

<!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=utf-8" />

<style>
#container {
 margin: auto;
 width: 400px;
 border-top-width: 0px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #000033;
 border-right-color: #000033;
 border-bottom-color: #000033;
 border-left-color: #000033;
 background-color: #ffffff;
}
#container #header #header_left {
 float: left;
 background-image: url(images/header_left.gif);
 background-repeat: no-repeat;
 height: 42px;
 width: 45px;
}
#container #header #header_right {
 background-image: url(images/header_right.gif);
 background-repeat: no-repeat;
 height: 42px;
 width: 6px;
 float: right;
}
body {
 padding-top: 30px;
 background-color: #cccccc;
}
#container #content {
 padding: 5px;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: normal;
 color: #666666;
}
#container #footer {
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 color: #999999;
 text-align: right;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-top-color: #999999;
 border-right-color: #000033;
 border-bottom-color: #000033;
 border-left-color: #000033;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 5px;
}
#container #footer a {
 color: #999999;
 text-decoration: none;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 10px;
}

#container #header #header_main {
 float: left;
 padding: 5px;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #ffffff;
 margin-top: 5px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
}
.sbtn    {
 background-image: url(images/button.gif);
 border: 1px solid #000033;
 height: 22px;
 width: 82px;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 color: #ffffff;
 font-weight: bold;
 background-position: center;
 padding: 0px;
 margin-top: 20px;
 margin-right: 20px;
 margin-bottom: 0px;
 margin-left: 20px;
}
button {
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #ffffff;
 height: 22px;
 width: 82px;
 background-image: url(images/button.gif);
}
#container #content #form1 legend {
 padding: 5px;
 margin: auto;
}
form {
 margin: 10px 5px 0px 5px;
}

 


#container #header {
 padding: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 background-image: url(images/header_bg.gif);
 background-repeat: repeat-x;
 height: 42px;
}
label {
 padding: 0px;
 text-align: center;
}

.msg {
 text-align:left;
  color:#666;
 background-repeat: no-repeat;
  margin-left:30px;
   margin-right:30px;
 padding:5px;
   padding-left:30px;
}

.emsg {
 text-align:left;
 margin-left:30px;
   margin-right:30px;
 color:#666;
 background-repeat: no-repeat;
 padding:5px;
   padding-left:30px;
}

#loader{
   visibility:hidden;
}

#f1_upload_form{
   height:100px;
}

#f1_error{
   font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
   font-weight:bold;
   color:#ff0000;
}

#f1_ok{
   font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
   font-weight:bold;
   color:#00ff00;

}

#f1_upload_form {
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: normal;
 color: #666666;
}

#f1_upload_process{
   z-index:100;
   visibility:hidden;
   position:absolute;
   text-align:center;
   width:400px;
}
</style>
  
<script language="网页特效" type="text/javascript">
<!--
function startupload(){
      document.getelementbyid('f1_upload_process').style.visibility = 'visible';
      document.getelementbyid('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopupload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">the file was uploaded successfully!</span><br/><br/>';
      }
      else {
         result = '<span class="emsg">there was an error during file upload!</span><br/><br/>';
      }
      document.getelementbyid('f1_upload_process').style.visibility = 'hidden';
      document.getelementbyid('f1_upload_form').innerhtml = result + '<label>file: <input name="myfile" type="file" size="30" /></label><label><input type="submit" name="submitbtn" class="sbtn" value="upload" /></label>';
      document.getelementbyid('f1_upload_form').style.visibility = 'visible';     
      return true;  
}
//-->
</script>  
</head>

<body>
       <div id="container">
            <div id="header"><div id="header_left"></div>
            <div id="header_main">max's ajax file uploader</div><div id="header_right"></div></div>
            <div id="content">
                <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startupload();" >
                     <p id="f1_upload_process">loading...<br/><img src="loader.gif" /><br/></p>
                     <p id="f1_upload_form" align="center"><br/>
                         <label>file: 
                              <input name="myfile" type="file" size="30" />
                         </label>
                         <label>
                             <input type="submit" name="submitbtn" class="sbtn" value="upload" />
                         </label>
                     </p>
                    
                     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
                 </form>
             </div>

         </div>
     
</body>  

这两款ajax文件上传代码其实都是利用了js的iframe或ajax post来实现的下面来看看代码吧。
 代码如下 复制代码

<html>
<body>
<h1>ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/>
<div id=result></div>
<pre class=js name="code">
<script language=网页特效>
// 上传函数
function btn_send.onclick() {
data = ""
spliter = "-------7d8d733180846"
datadata = data + spliter + " "
datadata = data + "content-disposition: form-data; name="photofile"; filename="c:\a.txt" "
// datadata = data + "content-type: image/pjpeg" + vbcrlf
datadata = data + "content-type: text/plain" + " " + " "
text = "my name is wilson lin."
postlength = text.length + data.length + 2 + spliter.length + 4
package = data + text + " " + spliter + "-- "

alert(package)
// 把xml文档发送到web服务器
var xmlhttp = new activexobject("microsoft.xmlhttp");
xmlhttp.open("post","./upload.php",false);
xmlhttp.setrequestheader("content-type", "multipart/form-data; boundary=-----7d8d733180846");
xmlhttp.setrequestheader("content-length", postlength);
xmlhttp.send(package);
// 显示服务器返回的信息
result.innerhtml=xmlhttp.responsetext;
}
</script>
</pre>
</body>
</html>


<html>
<script language="javascript">
<!--
   var xmlhttp;
  function createxmlhttprequest() {
   if (window.activexobject) {
    xmlhttp = new activexobject("microsoft.xmlhttp");
   }
   else if (window.xmlhttprequest) {
    xmlhttp = new xmlhttprequest();
   }
  }
  function uploade(e){
   var fileadd
   fileadd = e;
   
    createxmlhttprequest();
    xmlhttp.onreadystatechange = handlestatechange;
    var url = "pic_upload.asp教程?add="+fileadd+"&timestamp="+new date().gettime();
    xmlhttp.open("get",url,true);
    xmlhttp.send(null);
  
  }
  function handlestatechange() {
   document.getelementbyid("content").innerhtml = "这里写进度条";
   if (xmlhttp.readystate == 4) {
    if (xmlhttp.status == 200) {
     
     document.getelementbyid("content").innerhtml = xmlhttp.responsetext;
     
    }
    else{
     //alert(xmlhttp.status);
                                                                                  alert('错误，请联系管理员!');
     
    }
   }
  }
//-->
</script>
 <body>
<input type=file name="mefile" id="fileadd" onchange="alert(document.getelementbyid('fileadd').value);">
<input type="submit" value="上传" onclick="uploade(document.getelementbyid('fileadd').value);">
<div id="content"></div>
 </body>
</html>

 

 代码如下 复制代码
<?php教程
 
class mycache
{
  private $cache;
  function  __construct()
  {
    $this->cache = new memcache();
    // you can replace localhost by memcached server ip addr and port no.
    $this->cache->connect('localhost', 10987);
  }
 
  function get_data($key)
  {
    $data = $this->cache->get($key);
    if($data != null)
      return $data;
    else
    {
      if($this->cache->getresultcode() == memcached::res_notfound)
      {
        //do the databse query here and fetch data
        $this->cache->set($key,$data_returned_from_database);
      }
      else
      {
        error_log('no data for key '.$key);
      }
    }
  }
}
 
$cache = mycache();
$cache->get_data('foo');
 
?>


memcache 在什么情况下被使用，什么情况下不要使用?
你在何时应该使用 memcache，又要在何时避免使用它？现在你已经知道了，memcahced 是被设计为减轻数据库教程端压力的。但是你最好能制定一个良好的策略，来想办法让 memcached 来尽可能的缓存那些最影响性能的查询。你可以试着为应用中的所有查询做一些执行时间日志，可以帮助你来分析哪些内容是要重点被缓存的。

现在假设你正在运营一个电子商务网站。 你可以在 memcached 中缓存产品的简介、运送信息，或者其它一些需要复杂查询的数据，等等。当一个产品页被加载的时候，上面提到的数据将会跳过数据库查询，直接从缓存中取得。缓存可以大大的改变你的网站整体性能表现，你只需要记得在后台更新产品的时候，把这些缓存一并更新就行了。

还有一些情况下，缓存数据并不是一个好主意，比如在一个数据被频繁更新的时候，每一次数据的更新，我们都需要去同时更新缓存，缓存的命中率不高，会导致一些额外的性能牺牲。这种情况下，或许直接查数据库会更好一些。

memcached 的安全性
如果你了解了 memcached 的工作流程， 你可能已经注意到了，在访问缓存的过程中，没有任何权限控制的相关流程。如果你的数据不是非常重要的，你大可不必担心这方面的安全问题。如果你需要的话，以下几点可以协助你更完全的使用它:

使用唯一的 key：因为在 memcached 中的数据是以一个大的数组形式存在的，所以你应该使用唯一的 key。访问你的数据的唯一办法就是通过你保存数据时的 key，除此之外再没有其它可查询的办法。
保证你的 memcached 器安全: 因为 memcached 本身并没有身份验证机制，所以对 memcached 的服务器查询，都应该通过防火墙进行。你可以在防火墙上设定规则，哪些服务器是允许被访问的，哪些是不允许被访问的。
加密你的数据： 你可以将数据和 key 通过加密的方式保存在 memcached 中。 这需要花费一些额外的 cpu 时间，但是为了你的数据安全，在情况允许的情况下，这个方法值得你去尝试。

css教程代码

@charset "utf-8";
/* css document */

#getplatform {
position: absolute;
visibility: hidden;
width: 180px !important;
border: 1px solid #77c608;
background: #fcfcfc;
cursor: pointer;
color: #ff7a23;
list-style-type: none;
z-index: 9999;
}
.hint {
width: 180px;
padding-left: 6px;
font-size: 12px;
color: #656565;
background: #fff;
border-bottom: 1px dashed #c1c1c1;
}
.mout {
width: 180px;
padding-left: 6px;
border-top: 1px dashed #fff;
border-bottom: 1px solid #fff;
font-size: 12px;
line-height: 160%;
color: #000;
background: #fff;
}
.mover {
width: 180px;
padding-left: 6px;
border-top: #fb6e04 1px solid;
border-bottom: #fb6e04 1px solid;
line-height: 160%;
font-size: 12px;
color: #457007;
background: #fff4d2;
cursor: hand;
}
.selected {
width: 180px;
padding-left: 6px;
border-top: #f2f8ff 1px solid;
border-bottom: #f2f8ff 1px solid;
line-height: 160%;
font-size: 12px;
color: #ffffff;
background: #ff9900;
}
.tdleft {
padding-left: 6px;
font-size: 12px;
}
.tdright {
padding-right: 4px;
}

调用方法

<link href="http://www.111cn.net/css_new/citys.css" rel="stylesheet" type="text/css"/><script language="网页特效" src="/js/jquery.js" type="text/javascript"></script><script language="javascript" src="http://www.111cn.net/js/allcity.js" type="text/javascript"></script><input name="city" type="text" id="city" value="中文/拼音" onfocus=showsearch(this) onblur=showsearch(this,1) onclick="suggest.display(this,'cityname',event)" onkeyup="suggest.display(this,'cityname',event)" />

[!--infotagslink--]

相关文章

  • php读取zip文件(删除文件,提取文件,增加文件)实例

    下面小编来给大家演示几个php操作zip文件的实例，我们可以读取zip包中指定文件与删除zip包中指定文件，下面来给大这介绍一下。 从zip压缩文件中提取文件 代...2016-11-25

  • Jupyter Notebook读取csv文件出现的问题及解决

    这篇文章主要介绍了JupyterNotebook读取csv文件出现的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2023-01-06

  • Photoshop打开PSD文件空白怎么解决

    有时我们接受或下载到的PSD文件打开是空白的，那么我们要如何来解决这个 问题了，下面一聚教程小伙伴就为各位介绍Photoshop打开PSD文件空白解决办法。 1、如我们打开...2016-09-14

  • C#操作本地文件及保存文件到数据库的基本方法总结

    C#使用System.IO中的文件操作方法在Windows系统中处理本地文件相当顺手,这里我们还总结了在Oracle中保存文件的方法,嗯,接下来就来看看整理的C#操作本地文件及保存文件到数据库的基本方法总结...2020-06-25

  • 解决python 使用openpyxl读写大文件的坑

    这篇文章主要介绍了解决python 使用openpyxl读写大文件的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-13

  • C#实现HTTP下载文件的方法

    这篇文章主要介绍了C#实现HTTP下载文件的方法,包括了HTTP通信的创建、本地文件的写入等,非常具有实用价值,需要的朋友可以参考下...2020-06-25

  • SpringBoot实现excel文件生成和下载

    这篇文章主要为大家详细介绍了SpringBoot实现excel文件生成和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-02-09

  • php无刷新利用iframe实现页面无刷新上传文件(1/2)

    利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数，该参数为从客户端获取的$_files变量，返回重新命名后的文件名，如果上传失...2016-11-25

  • Php文件上传类class.upload.php用法示例

    本文章来人大家介绍一个php文件上传类的使用方法，期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类， 它可以帮...2016-11-25

  • php批量替换内容或指定目录下所有文件内容

    要替换字符串中的内容我们只要利用php相关函数，如strstr,str_replace,正则表达式了，那么我们要替换目录所有文件的内容就需要先遍历目录再打开文件再利用上面讲的函数替...2016-11-25

  • PHP文件上传一些小收获

    又码了一个周末的代码，这次在做一些关于文件上传的东西。（PHP UPLOAD）小有收获项目是一个BT种子列表，用户有权限上传自己的种子，然后配合BT TRACK服务器把种子的信息写出来...2016-11-25

  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09

  • jQuery实现简单的文件上传进度条效果

    本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24

  • AI源文件转photoshop图像变模糊问题解决教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下AI源文件转photoshop图像变模糊问题的解决教程，各位想知道具体解决方法的使用者们，那么下面就快来跟着小编...2016-09-14

  • C++万能库头文件在vs中的安装步骤(图文)

    这篇文章主要介绍了C++万能库头文件在vs中的安装步骤(图文)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

  • Zend studio文件注释模板设置方法

    步骤：Window -> PHP -> Editor -> Templates，这里可以设置（增、删、改、导入等）管理你的模板。新建文件注释、函数注释、代码块等模板的实例新建模板，分别输入Name、Description、Patterna)文件注释Name: 3cfileDescriptio...2013-10-04

  • php文件上传你必须知道的几点

    本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项，下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21

  • ant design中upload组件上传大文件,显示进度条进度的实例

    这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29

  • C#使用StreamWriter写入文件的方法

    这篇文章主要介绍了C#使用StreamWriter写入文件的方法,涉及C#中StreamWriter类操作文件的相关技巧,需要的朋友可以参考下...2020-06-25

  • php实现文件下载实例分享

    举一个案例：复制代码 代码如下:<?phpclass Downfile { function downserver($file_name){$file_path = "./img/".$file_name;//转码，文件名转为gb2312解决中文乱码$file_name = iconv("utf-8","gb2312",$file_name...2014-06-07