javascript - 使用 jQuery 上传文件在 IE 中不起作用
问题描述
我很难让下面的代码在 IE 中工作。该代码在 Firefox、Chrome 和 Edge 中按预期工作;但不是在 IE 中。我会忽略它在 IE 中不起作用,但它是工作时使用的默认浏览器。
编写代码是为了将多个文件上传到特定的 SharePoint 文档库。我从这篇文章中得到了代码https://social.msdn.microsoft.com/Forums/office/en-US/bb590f35-da1b-4905-baa0-fb85a275abf6/multiple-files-upload-in-document-library-using -javascript-object-model?forum=appsforsharepoint。这是最后一篇文章,它在上述浏览器中运行良好。任何关于如何让它在 IE 中工作的建议将不胜感激。先感谢您。
脚本如下:
jQuery(document).ready(function() {
fileInput = $("#getFile");
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);
});
function registerClick() {
//Register File Upload Click Event
jQuery("#addFileButton").on('click', readFile);
}
var arrayBuffer;
function readFile() {
//Get File Input Control and read th file name
var element = document.getElementById("getFile");
var fileCount = element.files.length;
var filesUploaded = 0;
for (var i = 0; i < fileCount; i++) {
let file = element.files[i];
var reader = new FileReader();
reader._NAME = element.files[i].name
reader.onload = function(e) {
let fileactualName = e.target._NAME;
uploadFile(e.target.result, fileactualName);
}
reader.onerror = function(e) {
alert(e.target.error);
}
reader.readAsArrayBuffer(file);
}
}
function uploadFile(arrayBuffer, fileName) {
//Get Client Context,Web and List object.
var clientContext = new SP.ClientContext();
var oWeb = clientContext.get_web();
var oList = oWeb.get_lists().getByTitle('Comms Shared Files');
//Convert the file contents into base64 data
var bytes = new Uint8Array(arrayBuffer);
var i, length, out = '';
for (i = 0, length = bytes.length; i < length; i += 1) {
out += String.fromCharCode(bytes[i]);
}
var base64 = btoa(out);
//Create FileCreationInformation object using the read file data
var createInfo = new SP.FileCreationInformation();
createInfo.set_content(base64);
createInfo.set_url(fileName);
//Add the file to the library
var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)
//Load client context and execcute the batch
clientContext.load(uploadedDocument);
clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
}
function QuerySuccess() {
alert('File Uploaded Successfully.');
}
function QueryFailure(sender, args) {
console.log('Request failed with error message - ' + args.get_message());
}
解决方案
在 SharePoint 2010 中,我们可以使用 SharePoint 设计器打开 v4.master(默认),并在“X-UA-Compatible”中添加“IE=11”。
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=11"/>
在 SharePoint 2013/2016/2019/online 中,我们可以使用 REST API 通过 jQuery 代码将文件上传到文档库。
<input id="inputFile" type="file" multiple="multiple"/>
<input id="uploadDocumentButton" type="Button" value="Upload Document">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var libraryTitle="DL";
$(function(){
$("#uploadDocumentButton").click(function () {
if (document.getElementById("inputFile").files.length === 0) {
alert("Select a file!");
return;
}
for(var i = 0; i < document.getElementById("inputFile").files.length; i++){
var file = document.getElementById("inputFile").files[i];
uploadFileSync(libraryTitle, file.name, file);
}
alert("upload complete.");
});
});
function uploadFileSync(folderUrl, filename, file){
var reader = new FileReader();
reader.onloadend = function(evt){
if (evt.target.readyState == FileReader.DONE){
var buffer = evt.target.result;
var completeUrl =_spPageContextInfo.webAbsoluteUrl
+ "/_api/web/GetFolderByServerRelativeUrl('"+folderUrl+"')/Files/add(url='" + filename + "',overwrite=true)";
$.ajax({
url: completeUrl,
type: "POST",
data: buffer,
async: false,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-length": buffer.byteLength
},
complete: function (data) {
//alert("upload complete.");
//console.log(data.responseJSON.d.ServerRelativeUrl);
},
error: function (err) {
alert('failed');
}
});
}
};
reader.readAsArrayBuffer(file);
}
</script>
推荐阅读
- reporting-services - 报表项表达式只能引用同一分组范围或包含分组范围内的其他报表项
- javascript - 在同一函数中检查多个输入字段的不同长度
- encryption - 使用秘密值的 SHA 哈希作为其外部 ID 是否安全?
- android - 如何在不使用 React Native 中的任何 API 调用的情况下重新渲染组件?
- ruby-on-rails - URL中冒号后跟通配符“*someparam”是什么意思
- python - 从 Google 搜索中收集链接文本和链接 href
- swift - 如何使用swift在表格视图中搜索多个数据?
- javascript - 检查结果对象值在 javascript 中是否有效
- c# - 如何从数组中的可变数据创建并让用户下载 Excel 文件?
- python - 为什么 dlib 的 load_rgb_image() 方法会旋转我的一些图像?