Javascript更改html表单的值

Question

我开始使用filepicker来处理联系表单以上传文件。现在除了一件事，我已经有了这个部分。

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

<input type="filepicker" data-fp-apikey="------------------"
onchange="alert(event.fpfile.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

如果您想将网址放在文本框中，请按照以下说明操作。

从上面的答案略有改变

添加文本框，如下所示

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

在Javascript中这样改变

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