Working with IE, JQuery validation

[dondre]

Hi all,

I'm very new to AutoIt, just downloaded it tonight er, this morning but it has been a life saver. Up until this point I've been using C# mshtml, shdocvw for all of my IE automation. I've never been stuck until dealing with the input file type. Browsing the form posts I was able to find this nifty script that got the job done.

#include <IE.au3>
$oIE = _IECreate($weburl)_IELoadWait($oIE)$oIE.left = 0$oIE.Top = 
0$oIE.document.parentwindow.scroll(0, 
$oIE.document.body.scrollHeight/5)$oForm = _IEFormGetObjByName($oIE, 
"formmain")$oT = _IEFormElementGetObjByName($oForm, "updfile1")$oControl 
= _IEGetObjByName($oIE, "updfile1")_IEAction($oControl, 
'focus')Send("{SPACE}")

When I go to hit sumbit though it doesn't recognize that I've place a file to be uploaded. I manually click the button and noticed a JQuery load icon so there's defintely an event that doesn't seem to be getting fired when using the script to send the Space.

Here's a layout of the html.

 <div 
id="item_img_msg1" abp="568"></div> <div class="mg_b5 mg_l10" 
id="item_img_empty1" abp="569"> <input name="updfile1" class=" " id="item_img_file1" 
type="file" abp="570"> </div> <div class="mg_b5 
mg_l10" id="item_img_selected1" style="display: none;" abp="571"> <img id="item_img1" src="/common/images/noimage.gif" 
abp="572"> <input id="item_img_del1" style="vertical-align: bottom;" type="button" value="Delete" abp="573"> </div> <input name="hdnImgDelFlg1" id="imgdelflg1" type="hidden" value="" abp="574"> <span class="font_85 pg_l10" 
abp="575">(Size：Under 1MB;Format:JPEG,GIF,PNG</span> <br abp="576"> <span class="pg_l10" abp="577">Wide or Tall images will be chopped</span> <div class="HelpTxt 
mg_t5" abp="578"> Guide:<a href="/common/guide.pdf" 
target="_blank" abp="579">Image Upload Guide</a> </div>

And here's the Javascript associated with it.

 

expandcollapse popup

var 
ImageUploader 
= 
function 
(idx) 
{ 
var 
postData = 
{ 
name: 
"updfile", index: idx, imgApiType: $("#img_api_type").val(), unq: $("#unique_id").val(), 
postCnt: 
0 
}; 
var 
deleteData = 
{ 
index: 
idx, 
imgApiType: $("#img_api_type").val(), unq: $("#unique_id").val(), postCnt: 0 }; 
var 
onIamgeUploaded = function (response) { var status = $(response).find("otoma_status").text(); if (status != "0") { $("#item_img_msg" + idx).html("<div class='error_with_icon'>Upload 
Failed</div>"); return; } var url = 
$(response).find("img_url").text(); $("#item_img" + idx).attr("src", url + "?" + 
new 
Date().getTime()); $("#item_img_empty" 
+ 
idx).hide(); $("#item_img_selected" + idx).show(); $("[name='hdnImgDelFlg" + idx + "']").val("0"); postData.postCnt++; }; this.manualUpload 
= 
function 
(data) 
{ 
var 
postDataForManual = $.extend({}, 
postData, 
data); 
jQuery.ajax({ 
data: 
postDataForManual, url: 
"/api/itemimage/upload", cache: false, type: "post", beforeSend: function (XMLHttpRequest) { var loading_image_tag = $("<img>").attr({ "class": "js-loading_image" + idx, src: Module.imgpath + "/lib/fileuploader/loading.gif" 
}); 
$("#item_img_empty" + idx).after(loading_image_tag); $("#item_img_empty" + idx).hide(); }, success: function (response) { 
onIamgeUploaded(response); }, error: function () { 
$("#item_img_msg" + idx).html("<div class='error_with_icon'>Upload 
Failed!</div>"); $("#item_img_empty" + idx).show(); }, complete: function () { 
$("img.js-loading_image" + idx).remove(); } }); }; var 
init = 
function 
(idx) 
{ 
postData.index = idx; 
try 
{ 
new 
AjaxUpload("#item_img_file" + idx, 
{ 
action: 
"/api/itemimage/upload", name: "updfile", data: postData, onSubmit: function (file, extension) { AjaxUtils.loading(true); $("#item_img_msg" + idx).html(""); }, 
onComplete: function (file, response) { AjaxUtils.loading(false); 
onIamgeUploaded(response); } }); } catch 
(e) 
{} 
$("#item_img_del" + idx).click(function () { jQuery.ajax({ dateType: "xml", data: 
deleteData, url: 
"/api/itemimage/delete", cache: false, type: "post", beforeSend: function (XMLHttpRequest) { deleteData.postCnt = postData.postCnt; $("#item_img_msg" 
+ 
idx).html(""); $("#item_img_empty" + idx).show(); $("#item_img_selected" + idx).hide(); $("[name='hdnImgDelFlg" + idx + "']").val("1"); }, error: function () { 
$("#item_img_msg" + idx).html("<div class='error_with_icon'>Upload 
Failed!</div>"); } 
}); 
}); 
}; 
init(idx); 
}; 
var 
ImageUploaders 
= 
[]; 
var 
maxImageNumber = 
$("#max_image_number").val(); for (var i = 1; i <= maxImageNumber; i++) { ImageUploaders.push(new ImageUploader(i)); 
} 
var 
params 
= 
Module.Utility.getParameters(); var buying_support_item_id = params.buying_support_item_id; if (buying_support_item_id) { ImageUploaders[0].manualUpload({ 
buying_support_item_id: buying_support_item_id }); }

I really dont want to make this harder than it is. If i can just make sure that the proper events fire in order to trigger all this javascript background ajax loading of the image I'd be done. If that isn't possible is there a way to make a javascript all using AutoIt to trigger the event? I'm not very good with javascript so any advice would be be very appreciated!

[DaleHohm]

Look at the links in my sig about automating INPUT TYPE=FILE for some other approaches on this, particularly this one: '?do=embed' frameborder='0' data-embedContent>>

Dale