input file 隐藏css,ajaxfileupload 隐藏input file组件上传文件的两种实现

ajaxfileupload.js 网上一大把，自己可以去下载。

.div1{

float: left;

height: 41px;

width: 144px;

position:relative;

}

.div2{

text-align:center;

padding-top:12px;

font-size:15px;

font-weight:800;

height: 81px;

}

.inputstyle{

width: 144px;

height: 83px;

cursor: pointer;

font-size: 30px;

outline: medium none;

position: absolute;

filter:alpha(opacity=0);

-moz-opacity:0;

opacity:0;

left:0px;

top: 0px;

}

一：不显示input file，只有个div里面显示添加图片，点击div选择文件，点击上传按钮后才进行异步上传

//p_w_picpaths/add.jpg m默认图片

上传

function uploadButton() {

$("#imgSd").attr("src","p_w_picpaths/p_w_picpaths/loading.gif");//显示上传加载图片

$.ajaxFileUpload({

fileElementId: 'fileToUpload',//input file的id

url: '/JunitPcWeb/upload/index',

dataType: 'json',

data: { id: 'aaa', name: 'bbb' },

success: function (data, textStatus) {

$("#imgSd").attr("src",data.path);//更换为上传的图片路径

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$("#imgSd").attr("src","p_w_picpaths/add.jpg");

// $.messager.showWin({ msg: msg, title: '错误提示', color: 'red' });

}

});

}

二：不显示input file，只有个div里面显示添加图片，点击div选择文件后立即自动异步上传

/**

* 选择图片后自动开始上传

**/

$("#fileToUpload2").change(function(){

$("#imgSd2").attr("src","p_w_picpaths/p_w_picpaths/loading.gif");

$.ajaxFileUpload({

fileElementId: 'fileToUpload2',

url: '/JunitPcWeb/upload/index',

dataType: 'json',

data: { id: 'aaa', name: 'bbb' },

success: function (data, textStatus) {

$("#imgSd2").attr("src","p_w_picpaths/icons/large_clipart.png");

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$("#imgSd2").attr("src","p_w_picpaths/add.jpg");

// $.messager.showWin({ msg: msg, title: '错误提示', color: 'red' });

}

});

});

以上两种情况的核心并不在js，而是在css，css就是把input file设置为透明，并且覆盖整个div1，那么点击div里面的add.jpg其实是点击了透明的input file.

测试过ie,fir,google,360浏览器都正常。千万不要用dislapy=none的这种方式把file给弄隐藏了，这样ie为了安全性不让上传。