input type=file上传控件老问题

Posted 2020-09-18 MirrorSpace

// 1.用INPUT控制上传文件时，点击INPUT控件出现文件选择框。

// 2.如果在手机上使用时,一般不会出现这种较丑的

// 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数里使用脚本触发INPUT控件的

// 4.结果发现无效，无法使用JS触发INPUT的控件。（在PC端有的浏览器可以，在手机浏览器中有的安卓机可以，苹果机不行）

<form>

<input name="photos" type="file" accept="image/*">

<input name="photos" type="file" accept="image/*" capture="camcorder">

<input name="audios" type="file" accept="image/*" capture="microphone">

</form>

// 5.结果使用网友的办法,将INPUT控件的大小与按钮大小设为一样的,然后将控件的透明度设为0,盖在按钮上.

      这样看到的是按钮,但点击的还是INPUT,于是就可以弹出选择框了

// 注意事项

    1.提交时要放在表单元素中<form><input type="file" name="name属性一定要有，不然后台拿不到文件"/></form>

    2.可以使用jquery.form这个异步表单插件，很好用。

$(‘#theform‘).ajaxSubmit({

       type:‘post‘,// 表单方式

       url:‘abx/abz‘,// 提交地址

       data:para,// 参数,可以是一个JSON对象

       // 提交成功
       success: function (data) {
          $(‘#resultimg‘).html(‘成功，已经上传图片。‘);
       },

      // 提交失败
      error: function (data) {
          $(‘#resultimg‘).html(‘出错了,请刷新重试.‘);
      }
});