Question

我试图实现Drag＆amp;使用以下代码将文件拖放到浏览器：

function hello() {
  //document.getElementById("fileSelectorArea").style.background-color=grey;
  document.getElementById("fileSelectorArea").style.opacity=1;
}
function hi() {
  document.getElementById("fileSelectorArea").style.opacity=0.4;
}

function allowDrop(event) {
  event.preventDefault();
  document.getElementById("FirstLine").style.display="none";
  event.target.style.border = "4px dotted blue";
}


function leavedrag(event) {
  event.preventDefault();
  document.getElementById("FirstLine").style.display="inline";
  event.target.style.border = "3px dotted grey";
}

function dropHandler(event) {
  event.preventDefault();
  var files=event.dataTransfer.files;
  var x=files[0].name;
  var DropSize=files.length;
  if(DropSize==1) {

    //appending filehandler to target area and assign files to it---1      
    //IE restriction   
    event.target.appendChild(document.getElementById("fileDoc"));
    event.target.lastChild.files=files;
    //------------1

    //Browser restriction
    //Assign event Object to FileHandler---2
    var we=document.getElementById("fileSelector");
    we=event.target.lastChild;
    //-----2


    //assigning formData to a form---3
    var eq=document.forms[1];
    var form=new FormData(eq);
    form.append("file",files[0]);
    //---3


    var SizeOfFile=files[0].size;
    var yt=SizeOfFile/1024;
    var ct=yt/1000;
    if(ct > 60) 
      window.alert("document>64mb cannot be uplaoded");
    else
    {
      var y=document.getElementById("demo");
      y.style.display="inline";
      y.style.visibility="visible";
      y.innerHTML=x;
    }
  }
  else
    window.alert("upload one file Only");
  event.target.style.border = "3px dotted grey";
  document.getElementById("FirstLine").style.display="inline";

}

input#fileSelector {
  opacity:0;
  width:0.1px;
  height:0.1px;
  position:absolute;
  z-index=-1;
}
label#fileSelectorArea {
  background-color: lightGrey;
  opacity:0.4;
  padding:8px;
  outline:2px solid grey;
  margin-left:200px;
  bottom:15px;
  text-align:center;
  position:relative;
  top:7px;
}
label.hover {
  background-color:blue;
  opacity:1;
}
div#DragDropArea {
  margin-left:15px;
  width:300px;
  border:3px dotted grey;
  padding:80px;
  position:relative;
  top:50px;
}
label#Attachments {
  position:absolute;
  margin-left:15px;
  top:130px;
}
div#FirstLine {
  position:absolute;
  top:20px;
  margin-left:75px;
  opacity:0.7;
}
span#NextLine {
  top:40px;
  position:absolute;
  margin-left:50px;
  opacity:0.7;
}

<!--DOC_HANDLER FRAME--->


<div id="DragDropArea" ondragover="allowDrop(event)" ondrop="dropHandler(event)" ondragleave="leavedrag(event)">
  <div id="FirstLine">
    <span>Drag Files here to attach</span>
    <br>
    <span id="NextLine">or</span>
  </div>
</div>
<label for="fileSelector" id="fileSelectorArea" onmouseover="hello()" onmouseleave="hi()">
  Select Files<input type="file" id="fileSelector" />
</label>
<input type="file" id="fileDoc" style="opacity:0" />
<div id="AppendFile" style="margin-left:15px;position:relative;top:70px;">
  <p id="demo" style="visibility:hidden"></p>
</div>
<p id="demor" style="visibility:hidden"></p>
<form id="ui">
</form>

当尝试将“event.dataTransfer.files”分配给现有的FileHandler时，在删除文件以拖动区域时，IE-11浏览器无法识别“.files”对象。

我试图以下面的方式访问其他jsp中的FileObject：

function save()
{
  var t=null;
  if (parent.window.frames["DOC_HANDLER"]) {
    m_filename=parent.window.frames[2].document.getElementById("fileChooser");
    var ww=parent.window.frames[2].document.getElementById("ui");
    t=parent.window.frames[2].document.getElementById("filetype");
    var r=t.files[0];
    if(t==null)
      window.alert("drop a file first");
  }

  if(m_filename==="")
    window.alert("Please Upload a File");

<!--frame[1] name=newdetail"-->

有没有办法在父框架的javascript函数中获取File-Handler对象。我不想使用Form-Data的AJAX上传，因为我需要在Parent中发送一些其他数据和File-Content JSP。有人可以帮忙吗？

谢谢。

Answer 1

//appending filehandler to target area and assign files to it---1      
//IE restriction   
event.target.appendChild(document.getElementById("fileDoc"));
event.target.lastChild.files=files;

<input type="file">元素.files引用设置为只读的FileList对象。请参阅How to work with FileList (from <input type="file">) in Javascript?。

有什么方法可以让我获得File-Handler对象父框架的javascript功能。

您可以使用window.postMesaage()发布已删除文件的Blob URL，或将File对象转移为ArrayBuffer至parent window。< / p>

将Blob URL发布为消息

父window

let url;
window.addEventListener("message", function handleMessage(event) {
  // check origin of event
  if (event.target.origin === "http://origin.def") {
    url = event.data;
    // do stuff with `Blob URL` of `File` from `iframe`
  }
});

iframe window

let url;
function handleDrop(e) {
  url = URL.createObjectURL(e.dataTransfer.files[0]);
  window.parent.postMessage(url, window.parent.location.href));
}

将ArrayBuffer的{{1}}代表作为消息转发

父File

window

let url; let type; window.addEventListener("message", function handleMessage(event) { if (event.origin === "http://origin.def") { if (typeof event.data === "string") { type = event.data; } if (event.data instanceof ArrayBuffer && type) { var url = URL.createObjectURL(new Blob([event.data],{type:type})); console.log(url); // do stuff with `Blob URL` of `File` from `iframe` } } } iframe

window

将事件数据传输文件传递到其他页面

1 个答案: