ie7-8 js表单提交的问题

需求是上传一个图片，一开始是这么安排目录结构的

<form method="post" action="http://gwactv2.***/upload" enctype="multipart/form-data" id="picForm" target="form_iframe">
   <input type="file" id="uppic" class="none" name="uppic">
   <input type="text" id="role" class="none" name="role" value="1">
</form>
<a href="javascript:;" class="upload">上传照片</a>

js部分为：

$('.upload').click(function(){
        $('#uppic').click();
    })

$("#uppic").change(function(){
        var role = $('.popjoin').attr('data-role');
        $('#role').attr('value',role);
        $('#picForm').submit();
})

通过点击“.upload” 这个按钮 ,模拟 #uppic 这个input点击，然后通过change事件提交表单。但是ie8一下报错了。

 

排查原因：

ie下通过脚本触发input[file] 的change事件不起作用，必须用户点击input file。

 

解决方案：

<form method="post"  action="http://gwactv2.woniu.com/tzsy/h151207/upload" enctype="multipart/form-data" id="picForm" target="form_iframe" ispostreq=1>
   <input type="file" id="uppic" class="upload-file" name="uppic">
   <input type="text" id="role" class="none" name="role" value="">
   <input type="hidden" name='ispostreq' value="1">
   <input type="hidden"  name="jsoncallback" value="uploadSuccess">
</form>
<a href="javascript:;" class="upload">上传照片</a>

 

这样 .upload按钮其实就没用了。 让#uppic 变成透明层在按钮上面，直接点击触发。