Question

我有一个页面，显示用户上传的文件列表。它是这样的：

<ul id="FileUploader">
<li>
<a href="directory/filename1.pdf">Filename1</a> 
<a href="#" class="DeleteFileUpload">Delete</a>
</li>
<li>
<a href="directory/filename2.pdf">Filename2</a> 
<a href="#" class="DeleteFileUpload">Delete</a>
</li>
</ul>

我有一个CFC，其方法需要知道要删除哪个文件。因为这不是Form，我不知道如何将数据传递给CFC以使其删除文件。

CFC示例：

<cffunction name="DeleteUpload" access="remote" returnformat="JSON">

<cfargument name="Filename" required="true"> //which filename to delete
<cffile action = "delete" file = "c:\files\upload\#Arguments.Filename#"> //delete the file

   <cfquery> // Update SQL table to remove filename reference
       DELETE FROM UploadsTable
       WHERE Filename = '#Arguments.Filename#'
    </cfquery>
<cfset success = true> // all done so set variable to true
<cfreturn success> // returns success as JSON to notify Jquery of deletion
</cffunction>

如何使用JQuery Ajax将Filename的值传递给CFC，以便它知道要删除哪一个，然后在收到成功的结果后通知用户有警报？

我知道如何使用FORM执行上述操作，但因为这不是一种形式，我有点困惑。就我的JQuery而言：

$("#FileUploader").on('click', '.DeleteFileUpload', function () {
    $(this).parent('li').remove();
});

这只会从DOM中删除<li>。我还需要获取文件名并以某种方式将其传递给CFC。

Answer 1

您需要向CFC添加ajax调用：

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
    event.preventDefault();
    $(this).parent('li').remove();
    $.ajax('/path/to/your.cfc?method=DeleteUpload&Filename=' + $(this).attr('href'));
});

您需要将删除链接的href更改为文件路径（作为参考）并使用preventDefault（）

禁用单击

<a href="directory/filename2.pdf" class="DeleteFileUpload">Delete</a>

如果您不想将文件路径放在href中，您可以始终将其放在数据属性中或从兄弟链接中获取href。

Answer 2

（参与stackoverflow的新功能，暂时无法发表评论。）

不要删除元素并祈祷。立即删除它，让它失败，然后显示一个＆＃34;嘿，哎呀！＆＃34;消息令人尴尬和混乱。

相反，通过显示项目正在前往垃圾箱的路上来满足即时反馈目标，然后在它消失时将其杀死：

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
  event.preventDefault();

  // Do something showing that we're trying a delete...
  $(this).text('Deleting...')  

  var uri = '/path/to/your.cfc?method=DeleteUpload&Filename=' + encodeURI(     $(this).attr('href')) )

  $.ajax(uri)
    .done( function() {
      $(this).parent('li').remove();
    })
    .fail( function() {
      // Let them know we have a goof and let them try again
      alert('Whoa! That couldn't be deleted!')
      $(this).text('Deleted...')  
    })    
});

然后，您要考虑通过取消/重新绑定处理程序来阻止用户单击两次。

单击JQuery调用ColdFusion方法

2 个答案: