Javascript 更改 html 表单的值

Question

我开始使用 filepicker 上传文件来制作联系表。现在我已经让那部分工作了，除了一件事。

这是用于上传文件的 javascript 小部件：

<input type="filepicker" data-fp-apikey="------------------"
onchange="alert(event.fpfile.url)" >

现在警报显示上传文件的 url。

我的问题是：如何将此 url 设置为文本字段中的值？

提前致谢

Answer 1

替换输入标签的 onchange 值并添加一个范围以显示输出，如下所示

<input type="filepicker" data-fp-apikey="------------------"
onchange="displayValue(event)" />
    <span id="url"></span>

像这样添加一个javascript函数

function displayValue(event) {
 document.getElementById("url").innerHTML=event.fpfile.url; 
}

这将在 span 元素内显示 URL 值让我知道它是否有效

Answer 2

首先，将 javascript 事件直接放在 HTML 标签上是一种非常糟糕的做法。我会将它们移出 javascript 文件，加载到 HTML 页面底部。

现在，这是您的解决方案：

var filePicker = document.getElementById( 'file-picker' ),
    fileUrl    = document.getElementById( 'file-url' );

filePicker.addEventListener( 'change', function ( e ) {
  // is fpfile a method that filepicker
  // is adding to events?
  fileUrl.value = 'hard coded string'; // e.fpfile.url;
});

var $filePicker = $( '#file-picker-jq' ),
    $fileUrl    = $( '#file-url-jq' );

$filePicker.on( 'change', function ( e ) {
  $fileUrl.val( 'hard coded url' /* e.fpfile.url */ );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using JavaScript</p>
<input type="file" data-fp-apikey="-------" id="file-picker">
<input type="text" id="file-url">

<p>Using jQuery</p>
<input type="file" data-fp-apikey="-------" id="file-picker-jq">
<input type="text" id="file-url-jq">

Answer 3

如果您想将 url 放入文本框中，请按照以下步骤操作..

与我上面的回答略有不同

添加如下文本框

<input type="text" id="url" />

在Javascript中这样改

function displayValue(event) {
     document.getElementById("url").value=event.fpfile.url; 
}

Javascript 更改 html 表单的值

Javascript change value of html form

html

javascript

alert