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

前端之家收集整理的这篇文章主要介绍了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为了安全性不让上传

猜你在找的Ajax相关文章