HTML5 : JS 생성 파일을 밖으로 드래그하십시오

보안 문제로 인해 허용되지 않을 수도 있지만 JavaScript로 파일을 생성하고 사용자가이를 바탕 화면 (또는 파일 시스템)으로 드래그 할 수 있습니까?HTML5 : JS 생성 파일을 밖으로 드래그하십시오

는

다음 코드는 서버

files[0].addEventListener("dragstart",function(evt){ 
    evt.dataTransfer.setData("DownloadURL", "application/octet-stream:Eadui2.ttf:http://thecssninja.come/demo/gmail_dragout/Eadui.ttf"); 
},false);

에서 파일을 드래그 그리고 아래의 코드와 나는 파일을 생성하고 다운로드해야하지만 파일 이름을 설정할 수 없습니다 또는 사용자가를 선택하도록 할 수 있습니다 위치.

var uriContent = "data:application/octet-stream," + encodeURIComponent(JSON.stringify(map)); 
location.href = uriContent;

이상적으로 나는 둘의 마법의 결합을 원합니다.

출처

2012-01-10 kreek

왜 서버에서 삭제 한 후, 그것을 다운로드 한 후, 먼저 서버에 저장하지 마십시오? –

당신은'files [0] .addEventListener ("dragstart", function (evt) { evt.dataTransfer.setData ("DownloadURL", "응용 프로그램/옥텟 스트림 : Eadui2.ttf : 데이터 : 응용 프로그램/옥텟 스트림 , "+ encodeURIComponent (JSON.stringify (map)); ); }, false); '??? – Ben

@Andrew 예, 옵션입니다. 제 의뢰인은 앱에 서버 상호 작용이 없길 원하지만 그 방법이 유일한 방법 일 수 있습니다. – kreek

이 크롬으로 만 가능하며, 심지어 크롬에 당신의 위치를 설정할 수 없습니다해야합니다. 사용은 크롬 괜찮 경우 다음 옵션이있을 것이다 : CSS의 닌자의 튜토리얼에서와 같은 드래그가 n

스틱 '드롭, 당신은 벤의 답변을 시도해야합니다. encodeURIComponent은 편도이지만 BlobBuilder을 사용하여 파일을 생성 한 경우 window.webkitURL.createObjectURL()을 사용하여 파일의 URL을 가져올 수 있습니다. FileWriter()을 requestFileSystem(TEMPORARY, ...)과 함께 사용해 볼 수도 있습니다. 사용자가 (또한 드래그하는 동작)을 클릭하는 당신이 정기적으로 링크를 가질 수 있도록
크롬 앵커 태그 download 속성을 지원합니다 크로스 브라우저 지원에 대한

<a href="#your_url" download="filename.ext">Download</a>
내가 Downloadify을 제안한다.

출처

2012-01-11 03:40:35 tungd

파일을 저장하고 반환 값을 확인한 후 다운로드 파일 기능을 실행 한 다음 서버에서 파일을 삭제하는 서버 파일을 서버로 보내보십시오.

$.ajax({ 
    url: 'saveFile.php', 
    method: 'post', 
    data: { 
    Filedata: data// file data variable 
    }, 
    success: function(d) { 
    // save file function, where d is the filename 
    } 
})

PHP (jQuery로) 이런

예시 : $ 파일명 = // 파일명 생성 file_put_contents를 ($ 파일명, $ _POST [ 'FILEDATA']); echo $ filename;

은 분명히에 더가 있지만 그 기초

출처

2012-01-10 20:24:59

다음 코드는 현재 크롬에서 일하고 :

// generate downloadable URL, file name here will not affect stored file 
var url = URL.createObjectURL(new File([JSON.stringify(map)], 'file_name.txt')); 
// note that any draggable element may be used instead of files[0] 
// since JSON.stringify returns a string, we use 'text' type in setData 
files[0].addEventListener("dragstart", function(evt) { 
    evt.dataTransfer.setData("DownloadURL", "text:file_name.txt:" + url); 
}, false);

을 지금, 데스크탑 또는 파일 시스템에 브라우저에서 우리의 파일 [0] 요소를 끌고있다라는 텍스트 파일을 저장합니다, FILE_NAME .txt.

다른 파일 이름 : 자유롭게 선택

출처

2016-03-20 00:53:47 Andriy

HTML5 : JS 생성 파일을 밖으로 드래그하십시오

답변

관련 문제