iframe 上傳圖片

時間 2019-11-13

標籤 iframe 上傳圖片欄目 HTML 简体版

原文原文鏈接

使用頁面代碼：javascript

<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 請求後服務器返回代碼：css

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

效果：html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。