当前位置: 代码迷 >> JavaScript >> 多重启用选择导致服务器端错误
  详细解决方案

多重启用选择导致服务器端错误

热度:32   发布时间:2023-06-05 11:46:46.0

我有一个要传递给应用脚本功能的表格。 表单元素之一是一个列表框,允许用户进行多项选择。 只要从列表框中选择一项,该功能(从另一个输入元素上载图像)就可以正常运行,但是只要选择两项或多项,该功能就会引发故障。 尽管该函数从不使用列表框,但由于某些原因为什么将其作为表单的一部分可能会导致将其传递给函数的问题,我该如何解决呢?

HTML片段:

  <form id="classForm">
 <img id="previewImg" width=300px>
<input type="file" name="imageLoader" id="imageUpload" accept="image/*"      onchange="upload();">
<select multiple="true">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</form>

使用Javascript:

<script type="text/javascript">
 //This function stub passes in the form to a function that uploads a user-provided image for preview use
 function upload(){

    var form = document.getElementById("classForm");

    google.script.run.withSuccessHandler(uploadResult).uploadFile(form);
    google.script.run.withFailureHandler(uploadResult).uploadFile(form);
 }

  //This function displays a preview of the user's ad image
 //Data in: id of image, to be used to generate url
function uploadResult(url){

   url = "https://docs.google.com/uc?id=" + url;

    $('#previewImg').attr('src', url);
 }

//clears input so that onchange will fire even if user selects same image
$(document).on("click", "#imageUpload", function() {

   this.value = null;

 });
</script>

该函数(从上载调用,先进行一些处理,然后以表格形式发送):

function uploadFile(form) {
 // Name of folder where the files should be saved
var folderName = "AdImages";
var folder, folders = DriveApp.getFoldersByName(folderName);

//Find the folder, create if the folder does not exist
if (folders.hasNext()) {
  folder = folders.next();
} else {
  folder = DriveApp.createFolder(folderName);
}

// Get file from form as blob
var blob = form.imageLoader;    
var file = folder.createFile(blob);    

// Set the file description to something
file.setDescription("title"); 


//get picID

var picId = file.getId();

// Return the id of the picture, to be used to construct the previewable url
return picId;
}

我通过将文件输入元素包装成自己的形式解决了该问题。 诚然,这是一个很棘手的解决方案,但是由于我只需要访问该功能的一个特定元素,它就可以完成工作。

  相关解决方案