📄 up_image.html

📁 本程序基于 asp.net 2.0 +sql server 2
💻 HTML
字号:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>图像地址</title>
<script defer>
//如果捕捉到ESC键，则关闭窗口
function _CloseOnEsc() {
  if (event.keyCode == 27) { window.close(); return; }
}

/*
what is  textrange?
使用textrange对象可以在元素中检索和修改文字，在文本中根据指定的字符串定位，然后执行相应的命令
使用creatTextRange方法在一个元素上创建一个textrange对象，然后是哦也能够moveToElementText方法
modify文本。*/

//Moves the text range so that the start and end positions of the range encompass the text in the given element.
//Creates a TextRange object for the element.
function _getTextRange(elm) {
  var r = elm.parentTextEdit.createTextRange();
  r.moveToElementText(elm);
  return r;
}

//窗口的错误捕捉由HandelError函数完成
window.onerror = HandleError
//处理错误，用弹出窗口显示出错的信息和所在的行，然后关闭 inserimage 窗口
function HandleError(message, url, line) {
  var str = "An error has occurred in this dialog." + "\n\n"
  + "Error: " + line + "\n" + message;
  alert(str);
  window.close();
  return true;
}

//初始化函数
function Init() {
  var elmSelectedImage;
  var htmlSelectionControl = "Control";
  
  //dialogArguments是接收从父窗口传递过来的参数，也就是上个页面中showModalDialog中的第二个参数
  // Retrieves the variable or array of variables passed into the modal dialog window. 
  var globalDoc = window.dialogArguments;
  
  //Represents the active selection, which is a highlighted block of text, 
  //and/or other elements in the document on which a user or a script can carry out some action.
  var grngMaster = globalDoc.selection.createRange();
  
  // event handlers 
  //当用户按下键盘时关联事件到_CloseOnEsc; 
  document.body.onkeypress = _CloseOnEsc;
  //确定按钮关联道btnOKClick事件
  btnOK.onclick = new Function("btnOKClick()");
  
  txtFileName.fImageLoaded = false; //如果txtFileName中已填入图片名，则为true
  txtFileName.intImageWidth = 0;
  txtFileName.intImageHeight = 0;
  
//如果父页的当前选择是一个Control，且只选中了一个控件(length==1)来决定的
  if (globalDoc.selection.type == htmlSelectionControl) {
    if (grngMaster.length == 1) {
      elmSelectedImage = grngMaster.item(0);//取得当前选定的control
      //如果在父页中当前的选择是一副图片，也就是tagName是IMG，则给弹出窗口中的各框赋值
      if (elmSelectedImage.tagName == "IMG") {
        txtFileName.fImageLoaded = true;
        if (elmSelectedImage.src) {
          txtFileName.value          = elmSelectedImage.src.replace(/^[^*]*(\*\*\*)/, "$1");  // fix placeholder src values that editor converted to abs paths
          txtFileName.intImageHeight = elmSelectedImage.height;
          txtFileName.intImageWidth  = elmSelectedImage.width;

        }
      }
      //赋值完毕
    }
  }
  //给txtFileName赋值，并取得焦点
//  txtFileName.value = txtFileName.value || "http://";
//  txtFileName.focus();
  

}

//检测textbox中输入的是否有效的数字
function _isValidNumber(txtBox) {
  var val = parseInt(txtBox);
  if (isNaN(val) || val < 0 || val > 999) { return false; }
  return true;
}

//按下确定后执行的函数
function btnOKClick() {

 
  var elmImage;
  var intAlignment;
  var htmlSelectionControl = "Control";
  var globalDoc = window.dialogArguments;
  var grngMaster = globalDoc.selection.createRange();
  
var collAll = document.frames("child").document.all;
var upImgName=collAll("hfName").value;
txtFileName.value=upImgName;
  
//错误检查，检查txtFileName中是否有内容，检查水平、竖直、边框中是否为数字
//如果有错误，则弹出alert后退出


  if (!txtFileName.value || txtFileName.value == "http://") { 
    alert("Image URL must be specified.");
    txtFileName.focus();
    return;
  }
 

  // 删除选定的内容，替换为图片
  if (globalDoc.selection.type == htmlSelectionControl && !txtFileName.fImageLoaded) {
    grngMaster.execCommand('Delete');
    grngMaster = globalDoc.selection.createRange();
  }
    
  idstr = "\" id=\"556e";     // new image creation ID
  if (!txtFileName.fImageLoaded) 
    {
      grngMaster.execCommand("InsertImage", false, idstr);
      elmImage = globalDoc.all['556e'];
      elmImage.removeAttribute("id");
      elmImage.removeAttribute("src");
      grngMaster.moveStart("character", -1);
    }
   else 
   {
     elmImage = grngMaster.item(0);
     if (elmImage.src != txtFileName.value) {
      grngMaster.execCommand('Delete');
      grngMaster = globalDoc.selection.createRange();
      grngMaster.execCommand("InsertImage", false, idstr);
      elmImage = globalDoc.all['556e'];
      elmImage.removeAttribute("id");
      elmImage.removeAttribute("src");
      grngMaster.moveStart("character", -1);
      txtFileName.fImageLoaded = false;
    }
    grngMaster = _getTextRange(elmImage);
  }

  if (txtFileName.fImageLoaded) {
    elmImage.style.width = txtFileName.intImageWidth;
    elmImage.style.height = txtFileName.intImageHeight;
  }

  if (txtFileName.value.length > 2040) {
    txtFileName.value = txtFileName.value.substring(0,2040);
  }
  
  //图像的源地址就是txtFileName中的文本

  elmImage.src = txtFileName.value;

  elmImage.width=collAll("hfWidth").value;

  
  //移动插入点到当前选择范围的开始或者末尾，false为末尾
  grngMaster.collapse(false);
  grngMaster.select();
  window.close();
  
}


</script>
</head>

<body id="bdy" onload="Init()"  >
<iframe id="child"  frameborder ="0" scrolling ="no" src="fileupload.aspx"  width ="390" height ="250" ></iframe>
       <div style="position: absolute; top: 168px; left: 179px; width: 219px; height: 96px;"> 
           <span style="color: #ff0033">第二步：点击 <span><strong>OK</strong></span> 按钮，即可完成图片插入</span><br />
<input id="txtFileName" visible ="false"  onfocus="select()" tabindex="10" name="T1" style="visibility: hidden"/>
<button id="btnOK" tabindex="40" type="submit" style="height: 29px" ><span style="font-size: 10pt">就是这张了！<span style="color: #ff0066"><strong>OK</strong></span></span></button>
</div>
</body>

</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -