Hướng dẫn load local file javascript - tải tệp cục bộ javascript

198

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đã cố gắng mở tệp với

window.open["file:///D:/Hello.txt"];

Trình duyệt không cho phép mở tệp cục bộ theo cách này, có thể vì lý do bảo mật. Tôi muốn sử dụng dữ liệu của tệp ở phía máy khách. Làm cách nào để đọc tệp cục bộ trong JavaScript?

Hỏi ngày 27 tháng 8 năm 2010 lúc 9:00Aug 27, 2010 at 9:00

0

Đây là một ví dụ sử dụng

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

2:

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

Contents of the file:

Thông số kỹ thuật

//dev.w3.org/2006/webapi/FileAPI/

Tính tương thích của trình duyệt web

• Tức là 10+
• Firefox 3.6+
• Chrome 13+
• Safari 6.1+

//caniuse.com/#feat=fileapi

Đã trả lời ngày 10 tháng 10 năm 2014 lúc 11:59Oct 10, 2014 at 11:59

Paolo Morettipaolo MorettiPaolo Moretti

52.5K22 Huy hiệu vàng100 Huy hiệu bạc92 Huy hiệu Đồng22 gold badges100 silver badges92 bronze badges

10

Cơ sở Filereader HTML5 cho phép bạn xử lý các tệp cục bộ, nhưng chúng phải được người dùng chọn, bạn không thể bắt nguồn từ đĩa người dùng đang tìm kiếm các tệp.

Tôi hiện đang sử dụng điều này với các phiên bản phát triển của Chrome [6.X]. Tôi không biết những gì các trình duyệt khác hỗ trợ nó.

DDA

5,8142 Huy hiệu vàng24 Huy hiệu bạc34 Huy hiệu đồng2 gold badges24 silver badges34 bronze badges

Đã trả lời ngày 27 tháng 8 năm 2010 lúc 9:16Aug 27, 2010 at 9:16

HBPHBPHBP

15.3k6 Huy hiệu vàng27 Huy hiệu bạc34 Huy hiệu đồng6 gold badges27 silver badges34 bronze badges

3

Bởi vì tôi không có cuộc sống và tôi muốn có 4 điểm danh tiếng đó để tôi có thể thể hiện tình yêu của mình [những câu trả lời nâng cao của] những người thực sự giỏi trong việc mã hóa, tôi đã chia sẻ bản chuyển thể của tôi về mã của Paolo Moretti. Chỉ cần sử dụng

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

3Function để được thực thi với nội dung tệp là tham số đầu tiên

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

4.

function dispFile[contents] {
  document.getElementById['contents'].innerHTML=contents
}
function clickElem[elem] {
	// Thx user1601638 on Stack Overflow [6/6/2018 - //stackoverflow.com/questions/13405129/javascript-create-and-save-file ]
	var eventMouse = document.createEvent["MouseEvents"]
	eventMouse.initMouseEvent["click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null]
	elem.dispatchEvent[eventMouse]
}
function openFile[func] {
	readFile = function[e] {
		var file = e.target.files[0];
		if [!file] {
			return;
		}
		var reader = new FileReader[];
		reader.onload = function[e] {
			var contents = e.target.result;
			fileInput.func[contents]
			document.body.removeChild[fileInput]
		}
		reader.readAsText[file]
	}
	fileInput = document.createElement["input"]
	fileInput.type='file'
	fileInput.style.display='none'
	fileInput.onchange=readFile
	fileInput.func=func
	document.body.appendChild[fileInput]
	clickElem[fileInput]
}

Click the button then choose a file to see its contents displayed below.
Open a file

Đã trả lời ngày 10 tháng 6 năm 2018 lúc 9:00Jun 10, 2018 at 9:00

2

Thử

function readFile[file] {
  return new Promise[[resolve, reject] => {
    let fr = new FileReader[];
    fr.onload = x=> resolve[fr.result];
    fr.readAsText[file];
}]}

Nhưng người dùng cần phải hành động để chọn tệp

Đã trả lời ngày 18 tháng 4 năm 2019 lúc 18:01Apr 18, 2019 at 18:01

Kamil Kiełczewskikamil KiełczewskiKamil Kiełczewski

76.8K26 Huy hiệu vàng339 Huy hiệu bạc316 Huy hiệu Đồng26 gold badges339 silver badges316 bronze badges

3

Những người khác ở đây đã đưa ra mã khá công phu cho việc này. Có lẽ cần có mã phức tạp hơn vào thời điểm đó, tôi không biết. Dù sao, tôi đã nâng cấp một trong số họ, nhưng đây là một phiên bản rất đơn giản hoạt động giống nhau:

function openFile[] {
  document.getElementById['inp'].click[];
}
function readFile[e] {
  var file = e.target.files[0];
  if [!file] return;
  var reader = new FileReader[];
  reader.onload = function[e] {
    document.getElementById['contents'].innerHTML = e.target.result;
  }
  reader.readAsText[file]
}

Click the button then choose a file to see its contents displayed below.
Open a file

Đã trả lời ngày 3 tháng 8 năm 2020 lúc 10:07Aug 3, 2020 at 10:07

MagnusmagnusMagnus

1.44818 Huy hiệu bạc14 Huy hiệu đồng18 silver badges14 bronze badges

Xem xét định dạng lại tập tin của bạn thành JavaScript. Sau đó, bạn chỉ cần tải nó bằng cách sử dụng tốt ...

Đã trả lời ngày 30 tháng 8 năm 2020 lúc 12:36Aug 30, 2020 at 12:36

Andrew Pateandrew Pateandrew pate

3,49933 Huy hiệu bạc23 Huy hiệu đồng33 silver badges23 bronze badges

1

Dưới đây là cách thực hiện nó trong TypeScript nếu Blob đủ tốt [không cần chuyển đổi sang bytearray/chuỗi thông qua Filereader cho nhiều trường hợp sử dụng]

function readFile[{
  fileInput,
}: {
  fileInput: HTMLInputElement;
}]: Promise {
  return new Promise[[resolve, reject] => {
    fileInput.addEventListener["change", [] => {
      resolve[fileInput.files];
    }];
  }];
}

Đây là cách làm điều đó trong vani javascript

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

0

Đã trả lời ngày 5 tháng 7 năm 2021 lúc 15:12Jul 5, 2021 at 15:12

Nó không liên quan đến "lý do bảo mật". Và nó không quan trọng nếu nó cục bộ hoặc tập tin trên ổ đĩa mạng. Giải pháp cho HĐH Windows có thể là IIS - Dịch vụ thông tin Internet và đây là một số chi tiết: để mở tệp trong trình duyệt với Java Script Window.open [], tệp sẽ có sẵn trên máy chủ web. Bằng cách tạo thư mục ảo trên IIS của bạn được ánh xạ tới bất kỳ ổ đĩa vật lý nào, bạn sẽ có thể mở các tệp. Thư mục ảo sẽ có một số Địa chỉ. Vì vậy, thay vì

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

5 bạn sẽ viết

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

6IIS - Internet Information Services and this is some details :
To open file in browser with Java Script window.open[] , the file should be available on WEB server.
By creating Virtual Directory on your IIS that mapped to any physical drive you should be able to open files. The virtual directory will have some address. So instead of

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

5
You will write

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

6

Đã trả lời ngày 22 tháng 11 năm 2021 lúc 12:21Nov 22, 2021 at 12:21

Phương thức yêu cầu XMLHTTP không hợp lệ đối với các tệp trên đĩa cục bộ vì bảo mật trình duyệt không cho phép chúng tôi làm như vậy. Nhưng chúng tôi có thể ghi đè bảo mật trình duyệt bằng cách tạo một phím tắt-> Nhấp chuột phải Vị trí đường dẫn.exe "Phụ lục --Walling-File-Access-from-Files. Điều này được kiểm tra trên Chrome, tuy nhiên cần phải đóng tất cả các cửa sổ trình duyệt và mã nên được chạy từ trình duyệt được mở thông qua phím tắt này.

Đã trả lời ngày 4 tháng 6 năm 2013 lúc 7:45Jun 4, 2013 at 7:45

Bạn không thể. Các trình duyệt mới như Firefox, Safari, v.v. Chặn giao thức 'tệp'. Nó sẽ chỉ hoạt động trên các trình duyệt cũ.

Bạn sẽ phải tải lên các tệp bạn muốn.

DDA

5,8142 Huy hiệu vàng24 Huy hiệu bạc34 Huy hiệu đồng2 gold badges24 silver badges34 bronze badges

Đã trả lời ngày 27 tháng 8 năm 2010 lúc 9:16Aug 27, 2010 at 9:09

HBPHBPYoussef

15.3k6 Huy hiệu vàng27 Huy hiệu bạc34 Huy hiệu đồng1 gold badge14 silver badges24 bronze badges

1

Bởi vì tôi không có cuộc sống và tôi muốn có 4 điểm danh tiếng đó để tôi có thể thể hiện tình yêu của mình [những câu trả lời nâng cao của] những người thực sự giỏi trong việc mã hóa, tôi đã chia sẻ bản chuyển thể của tôi về mã của Paolo Moretti. Chỉ cần sử dụng

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

3Function để được thực thi với nội dung tệp là tham số đầu tiên

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

4.

Đã trả lời ngày 10 tháng 6 năm 2018 lúc 9:00

function readSingleFile[e] {
  var file = e.target.files[0];
  if [!file] {
    return;
  }
  var reader = new FileReader[];
  reader.onload = function[e] {
    var contents = e.target.result;
    displayContents[contents];
  };
  reader.readAsText[file];
}

function displayContents[contents] {
  var element = document.getElementById['file-content'];
  element.textContent = contents;
}

document.getElementById['file-input']
  .addEventListener['change', readSingleFile, false];

1

Thử

Nhưng người dùng cần phải hành động để chọn tệpJan 11, 2013 at 9:09

4