How to send attachments (images) and nested params using XHR to uplaoad file in titanium?

问题

I am trying to upload images from the photo gallery of the phone to the server.

Images gallery is opening perfectly fine. Here is my code.

    var win = Ti.UI.createWindow({
        navBarHidden : true,
    });

    var ind = Titanium.UI.createProgressBar({
        width : 200,
        height : 50,
        min : 0,
        max : 1,
        value : 0,
        style : Titanium.UI.iPhone.ProgressBarStyle.PLAIN,
        top : 10,
        message : 'Uploading Image',
        font : {
            fontSize : 12,
            fontWeight : 'bold'
        },
        color : '#888'
    });

    win.add(ind);
    ind.show();

    var main_url = "http://10.0.0.4:3000";

    Titanium.Media.openPhotoGallery({

        success : function(event) {
            Ti.API.info("success! event: " + JSON.stringify(event));
            var imageview = event.media;

            var xhr = Titanium.Network.createHTTPClient();

            xhr.onerror = function(e) {
                Ti.API.info('IN ERROR ' + e.error);
            };
            xhr.onload = function() {
                Ti.API.info('IN ONLOAD ' + this.status + ' readyState ' + this.readyState);
            };
            xhr.onsendstream = function(e) {
                ind.value = e.progress;
                Ti.API.info('ONSENDSTREAM - PROGRESS: ' + e.progress + ' ' + this.status + ' ' + this.readyState);
            };
            // open the client
            xhr.open('POST', main_url + '/images.json');
            xhr.setRequestHeader("Connection", "close");
            // send the data
            var params = "image[attachment]=" + imassage;
            xhr.send({
                media : imageview,
                title : "helloo helllo",
                desciption : "Sample Desciption",
                username : 'lorem',
                password : 'ipsum',
            });

        },
        cancel : function() {

        },
        error : function(error) {
        },
        allowImageEditing : true
    });

But i want to send nested parameters like :

image[media] = image
image[title] = "helloo helllo",
image[desciption] = "helloo helllo",
user[name] = "lorem",
user[password] = "ipsum",

I tried doisg something like

1. Try ONE

   var params = "image[title] = 'helloo helllo'; params = params +"&image[media] = '+ imageview;

and then

and so on...

xhr.open('POST', main_url + '/images.json',true);
xhr.setRequestHeader("Connection", "close");
// send the data
xhr.send({
    media : imageview,
    title : "helloo helllo",
    desciption : "Sample Desciption",
    username : 'lorem',
    password : 'ipsum',
});

but it sends the image as a blob and not attachment

1. Try Two

   var params = "image[title] = 'helloo helllo'; params = params +"&image[media] = '+ imageview;

and then

and so on...

xhr.open('POST', main_url + '/images.json');
xhr.setRequestHeader("Connection", "close");
// send the data
xhr.send({
    media : imageview,
    title : "helloo helllo",
    desciption : "Sample Desciption",
    username : 'lorem',
    password : 'ipsum',
});

but it sends the image as a blob and not attachment

----------EDIT----------

I succedded in making nested params by :

    xhr.send({
        user_id : "1",
        image : {
            attachment : immage,                
            'title' : "helloo helllo",
            desciption : "Sample Desciption",
            download_type : 'free',
            price : '0.0',
            tag_list : 'jddhd'
        },
    });

but this returns as :

"image"=>"{
    \"title\":\"helloo helllo\",
    \"username\":\"lorem\",
    \"desciption\":\"Sample Desciption\",
    \"order\":\"name\",
    \"media\":\"[object TiBlob]\",
    \"password\":\"ipsum\"
}

but i need to have parameters to be recieved like :

"image"=>{
    "title"=>"hello testing my uploads lorem",
    "description"=>"ssasd assdas asdas sad sadsa dsa ",
    "download_type"=>"free",
    "price"=>"0.0",
    "tag_list"=>"jddhd,akhdsa,"

    "attachment"=>#<ActionDispatch::Http::UploadedFile:0xb4c713e8 @original_filename="im.jpg",
    @content_type="image/jpeg",
    @headers="Content-Disposition: form-data; name=\"image[attachment]\"; filename=\"im.jpg\"\r\nContent-Type: image/jpeg\r\n",
    @tempfile=#<File:/tmp/RackMultipart20120429-6839-1w8vlxn>>,
}

and if I remove from attachment : image from image{} then it returns the object in desired way i.e.

    "attachment"=>#<ActionDispatch::Http::UploadedFile:0xb4c713e8 @original_filename="im.jpg",
    @content_type="image/jpeg",
    @headers="Content-Disposition: form-data; name=\"image[attachment]\"; filename=\"im.jpg\"\r\nContent-Type: image/jpeg\r\n",
    @tempfile=#<File:/tmp/RackMultipart20120429-6839-1w8vlxn>>

Now in real confusion how to resolve this issue. Thanks

回答1:

Not sure if you were able to solve this, but I was struggling with this for a little while and was able to get nested parameter file uploading to work by dynamically generating the hash using the following format:

var params = {};
params['user[user_id]'] = 1;
params['user[image][attachment]'] = image;
params['user[image][title]'] = "helloo helllo";
params['user[image][description]'] = "Sample Description";
params['user[image][download_type]'] = "free";
params['user[image][price]'] = "0.0";
params['user[image][tag_list]'] = "jddhd";
xhr.send(params);

if i tried to create the hash using the format you provided above, the image object was always being transferred as a TiBlob string. The above code is working for me.

来源：https://stackoverflow.com/questions/10366838/how-to-send-attachments-images-and-nested-params-using-xhr-to-uplaoad-file-in