如何将javascript变量发送到php以更改上传文件的文件名？

Question

How to change the filename for the upload to id+filename?

Example:

I have the id in a javascript variable item_id.

Is there a chance to add data on data.append and use this in the "upload.php"?

I want that the file name have instead of time and date the prefix id. Example id = 00002, file name = "picturewhatever.jpg".

The to be uploaded file should be "00002PictureWhatever.jpg"

<div id="mulitplefileuploader" title="">
    <br>
    Upload
</div>

<div id="status"></div>

<script>
    $(document).ready(function() {
        var settings = {
        url: "upload.php",
        method: "POST",
        allowedTypes:"jpg,png,gif",
        fileName: "myfile",
        multiple: true,
        onSuccess:function(files,data,xhr) {
            $("#status").html("<font color='green'>Upload successful</font>");
        },
        onError: function(files,status,errMsg) {
            $("#status").html("<font color='red'>Upload failed</font>");
        }
    }

    $("#mulitplefileuploader").uploadFile(settings);

    });

</script>

</div>

File: multifileuploader.js

function multiUploader(config){

    this.config = config;
    this.items = "";
    this.all = []

    var self = this;

    multiUploader.prototype._init = function(){
        if (window.File &&
            window.FileReader &&
            window.FileList &&
            window.Blob) {
             var inputId = $("#"+this.config.form).find("input[type='file']").eq(0).attr("id");
             document.getElementById(inputId).addEventListener("change", this._read, false);
             document.getElementById(this.config.dragArea).addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false);
             document.getElementById(this.config.dragArea).addEventListener("drop", this._dropFiles, false);
             document.getElementById(this.config.form).addEventListener("submit", this._submit, false);
        } else
            console.log("Browser supports failed");
    }

    multiUploader.prototype._submit = function(e){
        e.stopPropagation(); e.preventDefault();
        self._startUpload();
    }

    multiUploader.prototype._preview = function(data){
        this.items = data;
        if(this.items.length > 0){
            var html = "";
            var uId = "";
            for(var i = 0; i<this.items.length; i++){
                uId = this.items[i].name._unique();
                var sampleIcon = '<img src="images/image.png" />';
                var errorClass = "";
                if(typeof this.items[i] != undefined){
                    if(self._validate(this.items[i].type) <= 0) {
                        sampleIcon = '<img src="images/unknown.png" />';
                        errorClass =" invalid";
                    }
                    html += '<div class="dfiles'+errorClass+'" rel="'+uId+'"><h5>'+sampleIcon+this.items[i].name+'</h5><div id="'+uId+'" class="progress" style="display:none;"><img src="images/ajax-loader.gif" /></div></div>';
                }
            }
            $("#dragAndDropFiles").append(html);
        }
    }

    multiUploader.prototype._read = function(evt){
        if(evt.target.files){
            self._preview(evt.target.files);
            self.all.push(evt.target.files);
        } else
            console.log("Failed file reading");
    }

    multiUploader.prototype._validate = function(format){
        var arr = this.config.support.split(",");
        return arr.indexOf(format);
    }

    multiUploader.prototype._dropFiles = function(e){
        e.stopPropagation(); e.preventDefault();
        self._preview(e.dataTransfer.files);
        self.all.push(e.dataTransfer.files);
    }

    multiUploader.prototype._uploader = function(file,f){
        if(typeof file[f] != undefined && self._validate(file[f].type) > 0){
            var data = new FormData();
            var ids = file[f].name._unique();
            data.append('file',file[f]);
            data.append('index',ids);
            $(".dfiles[rel='"+ids+"']").find(".progress").show();
            $.ajax({
                type:"POST",
                url:this.config.uploadUrl,
                data:data,
                cache: false,
                contentType: false,
                processData: false,
                success:function(rponse){
                    $("#"+ids).hide();
                    var obj = $(".dfiles").get();
                    $.each(obj,function(k,fle){
                        if($(fle).attr("rel") == rponse){
                            $(fle).slideUp("normal", function(){ $(this).remove(); });
                        }
                    });
                    if (f+1 < file.length) {
                        self._uploader(file,f+1);
                    }
                }
            });
        } else
            console.log("Invalid file format - "+file[f].name);
    }

    multiUploader.prototype._startUpload = function(){
        if(this.all.length > 0){
            for(var k=0; k<this.all.length; k++){
                var file = this.all[k];
                this._uploader(file,0);
            }
        }
    }

    String.prototype._unique = function(){
        return this.replace(/[a-zA-Z]/g, function(c){
           return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
        });
    }

    this._init();
}

function initMultiUploader(){
    new multiUploader(config);
}

Answer 1

Try to modify multiUploader.prototype._uploader = function(file,f)

and add a line after data.append('index',ids); with something like:

data.append('item_id','12345'); <-- you can extract the item_id by a url param, div id....

Then in your upload.php you will catch the item_id POST data