凤凰平台注册开户_凤凰彩票app下载安装_凤凰彩票投注网

热门关键词: 凤凰平台注册开户,凤凰彩票app下载安装,凤凰彩票投注网

Ajax形式提交带文件上传的表单及掩盖iframe应用,

作者: 编程知识  发布:2019-11-24

本文实例陈述了PHP+iFrame完毕页面不供给刷新的异步文件上传,是十一分实用的宽泛技巧。分享给大家供我们参照他事他说加以考查。具体解析如下:

相同的表单都以经过ajax情势交给,所以碰到带文件上传的表单就相比较麻烦。基本原理正是在页面扩充二个隐蔽iframe,然后经过ajax提交除文件之外的表单数据,在表单数据交由成功之后的回调函数中,通过form单独提交文件,而那个提交文件的form的target就本着前述蒙蔽的iframe。

html 代码

三个最原始最轻便易行的iframe上传例子:

谈起iframe,现在用它的人是更加少了,並且很四个人都相信它应当被AJAX所替代,的确如此,因为AJAX太美丽了。

复制代码 代码如下:

本例中动用iframe名字,所以表单在付出时会在iframe内张开链接(即无刷新,确切的说应该是
备感无刷新卡塔 尔(英语:State of Qatar)
在表单提交时,调用startUpload方法,当然那是JS定义的。

而是有豆蔻梢头种状态的兑现自己还是选用了iframe,这就是本文要说的文本的异步上传,感兴趣的能够尝试,倘使用原生的AJAX来兑现应有是要复杂的多。

<html>
<body>
<form action="upload.jsp" id="form1" name="form1"encType="multipart/form-data" method="post"target="hidden_frame">
<inputtype="file" id="file" name="file"style="width:450">
<INPUTtype="submit" value="上传文件"><spanid="msg"></span>
<br>
<fontcolor="red">帮忙JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>
<iframe name='hidden_frame' id="hidden_frame"style='display:none'></iframe>
</form>
</body>
</html>
<scripttype="text/javascript">
functioncallback(msg)
{
document.getElementByIdx_x_x("file").outerHTML =document.getElementByIdx_x_x("file").outerHTML;
document.getElementByIdx_x_x("msg").innerHTML = "<fontcolor=red>"+msg+"</font>";
}
</script>

前台上传页面index.html,首要是叁个表单与四个js回调函数。上传文件时,form表单的method、 enctype属性必需和下部代码同样。然后将target的值设为iframe的name,那样就足以兑现无刷新上传文件。

先来给初读书人补补功底知识:

index.html 中最重要要做的就是写叁个 form和 iframe ,并把 form 的 target 设为 iframe的名字,注意要把 iframe设为不可以看到,别的的都以符合规律的文书上传的写法,那样刷新的页面正是其风流倜傥蒙蔽的 Iframe ,而在index.html中是不会有页面刷新的,js的callback方法是回调方法。用于清空文件上传框和呈现后台消息,注意清空文件上传框的章程,和常常方法有些不相符

 代码如下

  1. 在iframe标签平时会钦赐其name性格以于标志;2. 在form表单中经过action和target来显著提交的指标地;3. 将form中的target指向iframe的name,则可将表单提交到了遮掩框架iframe中;4. iframe里的剧情其实也是贰个页面,此中的js里的parent对象指代父页面,即松开iframe的页面;5. PHP中用move_uploaded_file()函数来完成文件上传,$_FILES数组存款和储蓄有上传文件的连带新闻。

upload.jsp9Dhjsp 代码

<title>上传文件</title> 
 
<script> 
function CallbackFunction(str){ 
alert("上传成功"); 

</script> 
<form action="uploadfile.php" enctype="multipart/form-data" method="post" target="iframeUpload"> 
 <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0  SCROLLING="no" style="display:NONE"></iframe> 
 <input id="test_file" name="test_file" type="file"> 
 <input value="上传文件" type="submit"> 
</form> 

本文实现的是贰个顾客筛选了头像文件后马上上传并突显在页面上的例证,废话非常的少说,思路是如此的:

复制代码 代码如下:

后台上传管理页面uploadfile.php,这段代码为简易的上传代码,未有开展不当及那多少个管理。上传代码实行实现后,要报告父页面已经上传实现了,由此,在这里个页面里调用父页面包车型客车回调函数CallbackFunction,那一个函数能够有参数,格局本身定义。

  1. 在表单中放到四个iframe,设定好name特性值;2. 在采纳文件上传的控件的值更改时接触贰个js函数,该函数将表单提交至iframe,而iframe内嵌的页面用来管理公事上传;3. 在iframe中成功了文件上传之后,在js中经过parent来操作父页面,在一定的标签内展现图片,并将图片的保存地址赋给多个隐敝域;4. 赶回原先的页面,今后既完成了文件的上传,也在掩瞒域内记录了文本的不二秘技,整个经过并未有刷新页面;5. 末尾顾客只需提交原本的页面时重新载入参数表单的action和target属性的值就可以。

<%@ page language="java" contentType="text/html; charset=gb2312"%>
<%@ pageimport="com.jspsmart.upload.SmartUpload"%>
<%
//新建三个斯MattUpload对象
SmartUploadsu = newSmartUpload();
//上传起首化
su.initialize(pageContext);
//设定上传节制
//1.节制每一种上传文件的最大尺寸。
su.setMaxFileSize(10000000);
//2.约束总上传数据的长度。
su.setTotalMaxFileSize(20000000);
//3.设定允许上传的公文(通过扩展名约束卡塔尔,仅允许doc,txt文件。
su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");
boolean sign= true;
//4.设定禁绝上传的文件(通过扩展名限定卡塔尔国,制止上传带有exe,bat,jsp,htm,html增添名的文本和未有扩充名的文本。
try{
su.setDeniedFilesList("exe,bat,jsp,htm,html");
//上传文件
su.upload();
//将上传文件保留到内定目录
su.save("c://");
} catch(Exception e) {
e.printStackTrace();
sign = false;
}
if(sign==true)
{
out.println("<script>parent.callback('upload filesuccess')</script>");
}else
{
out.println("<script>parent.callback('uploadfileerror')</script>");
}
%>

 代码如下

下边是效果截图和兑现的代码:

upload.jsp 中即使注意最终输出的格式就能够了。其实原理便是出口黄金年代段js代码到 iframe中,然后在iframe中来决定它的父页面。

<?php 
set_time_limit(0); 
if($_SERVER['REQUEST_METHOD']=='POST') { 
  move_uploaded_file($_FILES["test_file"]["tmp_name"], 
  dirname($_SERVER['SCRIPT_FILENAME'])."/UploadTemp/" . $_FILES["test_file"]["name"]); 
  echo "<script>window.parent.CallbackFunction();</script>"; 

?>

upload.php页面如下:

OK,至此多少个无刷新的页面上传组件就办好了,不忘了在 WEB-INF/lib 下增加必需的jsp斯马特Upload.jar 包。

以上是用iframe达成无刷新上传文件的精简方法,想要健壮的次第的话供给再细化

   iFrame异步文件上传   iFrame异步文件上传 '; $html .= '用户名:https://www.jb51.net/article/'.htmlspecialchars.''; $html .= '头像地址:https://www.jb51.net/article/'.htmlspecialchars.''; $html .= ''; echo $html; } ?>   <!-- //&#36873;&#25321;&#20102;&#25991;&#20214;&#21518;&#24320;&#22987;&#24322;&#27493;&#19978;&#20256; function startUpload { document.getElementById.innerHTML = 'Loading...'; oForm.action = 'proceedupload.php'; oForm.target = 'uploadframe'; oForm.submit(); } //&#25972;&#20010;&#39029;&#38754;&#30340;&#25552;&#20132; function formSubmit { oForm.action = document.URL; oForm.target = '_self'; oForm.submit(); } // --> 

内需验证的是使用Iframe来上传,状态栏照旧会有刷新的,因为iframe中的页面刷新了呗,但是表面页面,便是您所阅览的页面是平素不刷新的,所以也得以说是雷同Ajax上传

例2

proceedupload.php页面如下:

您也许感兴趣的篇章:

  • ajax达成异步文件或图片上传效率
  • 依照ajax达成公文上传并展现进程条
  • 采纳ajaxfileupload插件完成公文上传无刷新的具体方法
  • 动用ajaxfileupload.js达成ajax上传文件php版
  • ajaxFileUpload.js插件扶助多文本上传的措施
  • ajax(iframe)无刷新提交表单、上传文件
  • ajax 文件上传应用轻巧实现
  • AJAX和JSP实现的依据WEB的文书上传的快慢调节代码
  • ajax上传多图到php服务器的章程

PHP利用iframe上传文件并重返值到父框架

      <!-- //&#22312;&#39029;&#38754;&#19978;&#26174;&#31034;&#21018;&#21018;&#19978;&#20256;&#25104;&#21151;&#30340;&#22270;&#20687; function doneLoading { var oDiv = theFrame.document.getElementById; oDiv.innerHTML = '<img src="' + url + '" mce_src="' + url + '" alt="&#19978;&#20256;&#22836;&#20687;" />'; theFrame.document.getElementById.value = url; } // --> 

淡水其实也是运用那样的做发法的。赶巧见到有童鞋博客上有那样写。就随手贴过来了。

感兴趣的相爱的人能够测量检验运维一下本文实例,相信本文所述对我们PHP程序设计的学习有必然的借鉴价值。

 代码如下

if($result)    
{   
echo "上传成功!文件路线为:".$file2;   
echo '<input name="img" type="hidden" value="'.$file2.'" id="img"/>';   
echo'<script>parent.document.form1.img.value=document.getElementById("img").value;</script>';   
}

文件上传成功后,把文件路线写入贰个藏匿的域中(img卡塔 尔(阿拉伯语:قطر‎,然后用DOM原理把隐蔽域中的VALUE发送到父框架的表单form1的img文本框中:
ok,再来看看淡水的。
淡水编辑器用了tinyMCE,所以有一丝丝分裂样。
我的form页:

 代码如下

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
    // O2k7 skin
    tinyMCE.init({
        // General options
        mode : "exact",
        elements : "content",
        theme : "advanced",
        skin : "o2k7",
        language : "zh",
        relative_urls : false,
//....略过一些...

    });

    function InsertHtml(type,path){

        type=type.toLowerCase()

        switch(type){
            case '.gif':
            thecode = '<img src="'+path+'" alt=""/>';
            break;
            case '.jpg':
            thecode = '<img src="'+path+'" alt=""/>';
            break;
//......略过部分......
            default :
            thecode = '<a href="'+path+'" target="_blank">Download</a>';
            break;
        }
        tinyMCE.execCommand('mceInsertContent',true,thecode);
    }
</script>

iframe也正是在这里个页面里了。
在本身的iframe的付出给的php管理里:

 代码如下

            $pasteJS = "<script type=text/javascript>n";
            $pasteJS .= "parent.InsertHtml("" . $file_ext . "","" . $upload_src . "");n";
            $pasteJS .= "</script>n";
            echo $pasteJS;

于是上传的文本就跑到tinyMCE的编写框里了。upload的公文路线也由此userdata会暂存起来,直到写入database。路线保存那块儿,也是在iframe的交给给的php管理公事里的,这里淡水就相当的少写了。

本文由凤凰平台注册开户发布于编程知识,转载请注明出处:Ajax形式提交带文件上传的表单及掩盖iframe应用,

关键词: