文档章节

iframe 上传图片

BryanYang
 BryanYang
发布于 2015/11/27 11:00
字数 497
阅读 81
收藏 1

使用页面代码:

<iframe frameBorder="0" class="imgiframe" src="/{=$smarty.const.XADMIN_APP_GROUP_SYSTEM=}/files/imageuploads?p=0&inputName=memCardLogo&node=image_uploads_memCardLogo" class="imgiframe"></iframe>
<script type="text/javascript">
    //index iframe的索引,code 错误码,0为正常 ,msg 文字提示,name 上传成功后图片名称 ,url 图片的url地址
    function defaultcallback(index,code,msg,name,url,input_name,node,count) {
        if(code != 0) {
            alert(msg);
            return false;
        }
        var html = "<div class=\"div_"+name+"\">"
                + "<img class=\"img-thumbnail image_src\" id=\""+name
                + "\" src=\""+url+"\" style=\"display:inline-block\" />"
                + "<input type=\"hidden\" name=\""+input_name+"\"  class=\""+input_name+"\"  value=\""+name+"\">"
                + "<a href=\""+url+ "\" class=\"btn btn-info upBtn vebot\" target=\"_blank\">查看</a><br><br></div>";
        if(count=="1") {
            $('.'+node).html(html);
            $("em#image_uploads_otherpics_check").hide();
        } else {
            var nowcount=0;
            nowcount=$("."+node+" div").length;
            if(nowcount>=count) {
                alert("对不起,上传的图片数量不能超过"+count+"张!");
            } else {
                $('.'+node).append(html);
            }
        }
    }
</script>

iframe 请求后服务器返回代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>图片上传</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/Public/css/bootstrap.min.css"  />
  <link rel="stylesheet" href="/Public/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/Public/css/jquery-ui-1.10.3.full.min.css" />
  <link rel="stylesheet" href="/Public/css/ace.min.css" />
  <link rel="stylesheet" href="/Public/css/ace-rtl.min.css" />
  <link rel="stylesheet" href="/Public/css/ace-skins.min.css" />
  <link rel="stylesheet" href="/Public/css/style.css" />
  <script src="/Public/jquery-ui/jquery.js"></script>
</head>
<body>
<form id="form_data" enctype="multipart/form-data"  name="form_data" method="post">
<input type="file" name="image" id="image" value="" style="display:none;" onchange="uploadImg();"></input>
<input type="hidden" name="p" value="0"></input>
<input type="hidden" name="inputName" value="memCardLogo"></input>
<input type="hidden" name="node" value="image_uploads_memCardLogo"></input>
<input type="hidden" name="picCount" value="1"></input>
<input type="hidden" name="fileSize" value="2097152"></input>
<input type="hidden" name="height" value="100000"></input>
<input type="hidden" name="width" value="100000"></input>
<input type="hidden" name="setType" value="false"></input>
<input type="hidden" name="minHeight" value="100000"></input>
<input type="hidden" name="minWidth" value="100000"></input>
<input type="hidden" name="setMin" value="false"></input>
<input type="hidden" name="typeApi" value=""></input>
<a id="upload_file" class="btn btn-danger upBtn" onclick="startImg();return false;" href="#">上传图片</a>
</form>
<script type="text/javascript">
$(function(){
$(".imgiframe", window.parent.document).css({"width":"250px","height":"50px"});
});

function startImg() {
  document.getElementById('image').value='';
  document.getElementById('image').click();
  return false;
}

function uploadImg() {
  document.getElementById('upload_file').disabled = true;
  document.getElementById('form_data').submit();
  return false;
}

//get请求的时候,服务器不返回以下脚本。
//当用户选了图片上传,form表单submit后(即post请求时),返回以下脚本。调用callback.
parent.defaultcallback("0","0","上传成功","T1pFhTBQZT1RCvBVdK","http://img1.ffan.com/T1pFhTBQZT1RCvBVdK","memCardLogo","image_uploads_memCardLogo","1");
</script>

效果:


© 著作权归作者所有

BryanYang
粉丝 16
博文 165
码字总数 52036
作品 0
石景山
程序员
私信 提问
加载中

评论(0)

javascript实现图片伪异步上传

实现逻辑 首先要知道, ajax无法发送带有文件的post请求所以,所以还是要用同步的方式,但是刷新的时候,我们不要在原来的页面刷新,去一个隐藏的iframe里面刷新,form表单中action正常填写处...

rand
2018/08/27
0
0
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
48
0
Javascript 异步上传插件--AjaxUpload

AjaxUpload: Javascript 异步上传插件,包含 3 个子项目 BUpload, JUpload, TUpload, 你可以根据项目的需求选择使用: BUpload : 基于HTML5, UI仿百度编辑器的图片上传, 支持图片上传,在线...

阳建
2017/09/15
879
4
上传图片到远程服务器并返回图片地址到本地显示

本示例将演示一个简单的上传图片到远程服务器,然后生成图片路径后通过提交的回调路径返回给本地服务器,最后将图片地址显示在前端页面。 本项目应用三个文件,即前端选取图片的页面,然后提...

Corwien
2016/06/16
2.4K
0
AjaxUpload v1.3.0 发布,Javascript 异步上传插件

AjaxUpload v1.3.0 已发布。 更新内容 修复BUpload组件,管理 API 的分页第一条数据获取不到的bug 分别给 JUpload, TUpload, BUpload 三个组件实现css的自动加载功能,不需要再手动引入css 修...

阳建
2017/09/15
1.1K
5

没有更多内容

加载失败,请刷新页面

加载更多

工作流-个人任务

设置个人任务处理人 1. BPMN中定义 <process id="group" name="组任务" isexecutable="true"> <startevent id="startevent1" name="Start"></startevent><!-- 直接设置处理人 --> ......

小小明1995
6分钟前
25
0
没有名为MySQLdb的模块

我正在使用Python 2.5.4版并安装MySQL 5.0版和Django。 Django在Python上运行良好,但在MySQL上运行良好。 我在Windows Vista中使用它。 #1楼 感谢derevo,但我认为还有另一种好方法: 下载并...

技术盛宴
19分钟前
28
0
MySQL学习笔记(一)InnoDB内存数据结构浅析

以下文章来源于腾讯云数据库,作者陈俊熹 Innodb存储引擎是目前MySQL最主流的存储引擎,学习Innodb, 可以先从其最基础的数据结构开始。Innodb的数据结构主要包括内存数据结构(In-MemoryStruc...

小知_知数堂
24分钟前
39
0
linux常用命令及用法示例

一、 帮助命令 ##1. 常用快捷键 快捷键| 功能 -|- ctrl + c |停止进程 ctrl+l |清屏;彻底清屏是:reset ctrl + q |退出 tab键 |提示(更重要的是可以防止敲错) 上下键 |查找执行过的命令 ct...

幻境fairy
32分钟前
20
0
gitlab重置用户密码

用户lms登录gitlab的密码忘记了,需要重置密码。 gitlab重置用户lms的密码: [root@gitlab ~]# gitlab-rails console production #进入gitlab管理控制台Loading production environment ...

xiaomin0322
35分钟前
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部