1.布局
<div class="z-photo">
<div class="z_file">
<input type="file" name="file" id="file" value="kkk" runat="server" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple="multiple" onchange="imgChange('z_photo','z_file');"/>
</div></div>
2.獲取input file里的文本信息
function imgChange(obj1, obj2) {//獲取點(diǎn)擊的文本框
var file = document.getElementById("file");//存放圖片的父級(jí)元素
var imgContainer = document.getElementsByClassName(obj1)[0];//獲取的圖片文件
var fileList = file.files;//文本框的父級(jí)元素
var input = document.getElementsByClassName(obj2)[0];
$.ajaxFileUpload({
url: "{:U('Grzx/dosfone')}",
secureuri: false, // 一般設(shè)置為false??
fileElementId: ['file'],fileFilter:'jpg,png', // 文件上傳表單的id
dataType: 'text', // 返回值類型 一般設(shè)置為json? ? ? ? ? ? ? ?
?type:'post',? ? ? ??
? ? ? ? data:{},? ? ? ? ? ??
? ? progress:function(ect){? ?
?? ? ? ? ? ? var percentComplete=Math.round(ect.loaded*100/ect.total);? ? ?
?? ? ? ? ? if(percentComplete==100)?
percentComplete=98 //已經(jīng)上傳100%俊鱼，留2%留給后臺(tái)操作? ? ? ?
?? ? ? ? loading1();? ? ? ? ? ? ? ? },??
? ? ? ? ? ? ? success: function(data) // 服務(wù)器成功響應(yīng)處理函數(shù)? {
? ? ? ? ? ? ? ? //loading1();
? ? ? ? ? ? ? ? ? ? var obj = eval("("+data+")");? ? ? ? ? ? ? ?
?? if(obj['success'] == '1')?
{$('.loaders').css('display','none');
alert('上傳成功');
location.reload(true);
} else {
alert('上傳失敗');
}
$('.head-right').html('編輯');}});
// location.reload(true);
loading1();
imgRemovef();};另外的function
注；
ajax上傳文件需要引入ajaxfileUpload.js文件
