使用jquery多文件上传插件删除上传图像的问题

Question

我正在使用jquery多图像上传插件。在这里我能够插入图像到数据库中。并在每个图像预览旁放置一个紧密的图标。这里是我的代码：

$(function() { 
    var url = (window.location.hostname === 'blueimp.github.com' || 
       window.location.hostname === 'blueimp.github.io') ? 
       '//jquery-file-upload.appspot.com/' : 'server/php/'; 

$('#fileupload').fileupload({ 
     url: url, 
     dataType: 'json', 
     autoUpload: true, 

    }).on('fileuploadadd', function (e, data) { 
     data.context = $('<div/>').appendTo('#files'); 
     $.each(data.files, function (index, file) { 
      var node = $('<p/>').append('<span class="close_img"><img src="/Moumita/image_upload/img/close_img.png"/><span>'); 

      node.appendTo(data.context); 
     }); 
    }) 
}); 

而在UploadHandler.php这些功能也存在：

function __construct($options = null, $initialize = true, $error_messages = null) { 
     $this->options = array(


      'script_url' => $this->get_full_url().'/', 
      'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/', 
      'upload_url' => $this->get_full_url().'/files/', 
      'user_dirs' => false, 
      'mkdir_mode' => 0755, 
      'param_name' => 'files', 
      // Set the following option to 'POST', if your server does not support 
      // DELETE requests. This is a parameter sent to the client: 
      'delete_type' => 'DELETE', 
      'access_control_allow_origin' => '*', 
      'access_control_allow_credentials' => false, 
      'access_control_allow_methods' => array(
       'OPTIONS', 
       'HEAD', 
       'GET', 
       'POST', 
       'PUT', 
       'PATCH', 
       'DELETE' 
      ), 
      .......................... 


      ) 
     ); 
     if ($options) { 
      $this->options = array_merge($this->options, $options); 
     } 
     if ($error_messages) { 
      $this->error_messages = array_merge($this->error_messages, $error_messages); 
     } 
     if ($initialize) { 
      $this->initialize(); 
     } 
    } 

    protected function initialize() { 
     switch ($this->get_server_var('REQUEST_METHOD')) { 
      case 'OPTIONS': 
      case 'HEAD': 
       $this->head(); 
       break; 
      case 'GET': 
       $this->get(); 
       break; 
      case 'PATCH': 
      case 'PUT': 
      case 'POST': 
       $this->post(); 
       break; 
      case 'DELETE': 
       $this->delete(); 
       break; 
      default: 
       $this->header('HTTP/1.1 405 Method Not Allowed'); 
     } 
    } 



    protected function set_file_delete_properties($file) { 
     $file->delete_url = $this->options['script_url'] 
      .$this->get_query_separator($this->options['script_url']) 
      .'file='.rawurlencode($file->name); 
     $file->delete_type = $this->options['delete_type']; 
     if ($file->delete_type !== 'DELETE') { 
      $file->delete_url .= '&_method=DELETE'; 
     } 
     if ($this->options['access_control_allow_credentials']) { 
      $file->delete_with_credentials = true; 
     } 
    } 



    protected function handle_form_data($file, $index) { 
     // Handle form data, e.g. $_REQUEST['description'][$index] 
    } 


    public function post($print_response = true) { 
     if (isset($_REQUEST['_method']) && $_REQUEST['_method'] === 'DELETE') { 
      return $this->delete($print_response); 
     } 
     ............ 

    } 

    public function delete($print_response = true) { 
     $file_name = $this->get_file_name_param(); 
     $file_path = $this->get_upload_path($file_name); 
     $success = is_file($file_path) && $file_name[0] !== '.' && unlink($file_path); 
     if ($success) { 
      // $this->delete_img($file_name); 
      foreach($this->options['image_versions'] as $version => $options) { 
       if (!empty($version)) { 
        $file = $this->get_upload_path($file_name, $version); 
        if (is_file($file)) { 
         unlink($file); 
        } 
       } 
      } 
     } 
     return $this->generate_response(array('success' => $success), $print_response); 
    } 


    function delete_img($delimg) 
    { 
      $delete_from_db = $this->query("DELETE FROM `file_upload_multiple_images` WHERE `images` = '$delimg'") or die(mysql_error()); 
      return $delete_from_db; 
    } 

我无法把这个删除功能来删除数据库以及文件夹的图像。 我想要调用一个关闭图标onclick的函数。

Answer 1

你必须使用回调函数使其工作。

回调函数是处理通过事件fileuploaddone从服务器接收的数据的函数。这样，你就会有这样的代码：

$('#fileupload').bind('fileuploaddone', callbackfunc); 

// Your callback function 
function callbackfunc(e, data) { 
    /* your code, like : if (data.kind === "error") alert(data.message); */ 
} 

但是你可以通过一个匿名函数缩短：

$('#fileupload').bind('fileuploaddone', function (e, data) { 
      /* your code, like : if (data.kind === "error") alert(data.message); */ 
}) 

删除，回调可与事件fileuploaddestroy的约束（见本页：BlueImp options） 。

让我知道我是否可以进一步帮助你。