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

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

<!--隐藏图片上传input 组件的css定义 通用两种情况-->

.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;<!--这个高度必须大于div2的高度 -->

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选择文件，点击上传按钮后才进行异步上传

<div class="div1">

<img src="images/add.jpg" id="imgSd" class="div2"/> //images/add.jpg m默认图片

<input id="fileToUpload" type="file" name="fileToUpload" class="inputstyle"/>

</div>

<button onclick="uploadButton();">上传</button>

function uploadButton() {

$("#imgSd").attr("src","images/images/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","images/add.jpg");

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

}

});

}

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

<div class="div1">

<img src="images/add.jpg" id="imgSd2" class="div2"/>

<input id="fileToUpload2" type="file" name="fileToUpload2" class="inputstyle"/>

</div>

/**

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

**/

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

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

$.ajaxFileUpload({

fileElementId: 'fileToUpload2',

url: '/JunitPcWeb/upload/index',textStatus) {

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

},errorThrown) {

$("#imgSd2").attr("src",color: 'red' });

}

});

});

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!