Jquery文件上传Blue Imp - 设置动态上传网址

时间:2014-05-27 14:17:54

标签: jquery file-upload blueimp

我正在使用Jquery上传文件库,并且很难设置要写入文件的目录。如果我使用示例中设置的标准位置,则上载文件。 以下代码有效:

 $('#fileupload').fileupload({
            disableImageResize: false,
            autoUpload: false,
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true}, 
             //url: currentDir
            url: '/assets/plugins/jquery-file-upload/server/php/'
        });

但如果我尝试更改网址如下:

    var currentDir = window.location.pathname;

return {
    //main function to initiate the module
    init: function () {

         // Initialize the jQuery File Upload widget:
        $('#fileupload').fileupload({
            disableImageResize: false,
            autoUpload: false,
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true}, 
             url: currentDir
            //url: '/assets/plugins/jquery-file-upload/server/php/'
        });

我收到此错误:SyntaxError:意外的令牌<

我还考虑过实施此解决方案:http://www.eliwheaton.com/web-development/dynamically-set-upload-directory-using-blueimp-jquery-file-upload

但没有快乐。有什么想法吗?

由于

1 个答案:

答案 0 :(得分:2)

问题是URL变量是找到PHP脚本的位置。它不是文件上传的位置。

我有类似的问题。我通过将额外的变量传递给脚本并在php中更改upload_dir变量来解决它。

您的默认index.php文件应如下所示。

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
$upload_handler = new UploadHandler();

我修改它以侦听从JS传递的额外变量。查看评论,看看发生了什么。基本上发生的事情是它确保在调用此文件(来自javascript)时收到名为fuPath的额外变量,如果没有,则不上传文件。如果收到路径,则使用它根据Web根目录获取最终目标。

    error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
require('UploadHandler.php');
$urlHolder = NULL;


// This option will be used while uploading the file.
// The path will come as POST request.
if( isset($_POST['fuPath']) ) {
    // perform validations to make sure the path is as you intend it to be
    $urlHolder = filter_var($_POST['fuPath'], FILTER_SANITIZE_URL);
}
// This option will be used when deleting a file.
// The file details will come from GET request so have to be careful
else if( isset($_GET['fuPath']) ){
    // perform validations to make sure the path is as you intend it to be
    $urlHolder = filter_var($_GET['fuPath'], FILTER_SANITIZE_URL);
}
else{
    exit;
}
$options = array(
                'upload_dir'=>  $_SERVER['DOCUMENT_ROOT'] .'/' .$urlHolder,
//              'upload_url'=>'server/php/dummyXXXX',   // This option will not have any effect because thumbnail creation is disabled
                'image_versions' => array(),            // This option will disable creating thumbnail images and will not create that extra folder.
                                                        // However, due to this, the images preview will not be displayed after upload
            );

if($urlHolder){
    $upload_handler = new UploadHandler($options , true , null);
}

现在在JS方面,我做了以下更改。

var fullUpldPath = "";
// when file upload form is initialised then along with other options I also set the file upload path "fuPath".
// default will be empty string, so we can validate in php code.
$(localFormNames.fileForm).fileupload({
    formData: {fuPath: fullUpldPath}
});

现在回到HTML。我创建了一个虚拟按钮(让我们调用#uploadFiles)用户点击上传图像。这是必需的,因为我想在用户点击上传和上传开始之间操纵这个fuPath变量。该插件的上传按钮(让我们称之为#pluginButton)是隐藏的。

因此,当用户单击#uploadFiles时,我会根据需要更改文件上载路径。设置修改后的变量,然后单击实际插件的上传按钮。

// ending / is mandatory.
fullUpldPath = "assets/uploadedImages" + $("#imagename").val() + "/";
$(localFormNames.fileForm).fileupload({
    formData: {fuPath: fullUpldPath}
});
// Now manually trigger the file upload
$("#pluginButton").click();