html代码:
<div class="canshubb">照片: <input type="file" number="0" class="file xuanze2" multiple="multiple"> <span style="font-size: 30px" class="state0" id="upprog">未上传</span> <input type="hidden" name="image" id="image" value="" class="image0"> </div>
js代码
<script>
//ajax表单提交
$("#btn").on('click', function() {
var company_id=$('#company_id').val();
var name=$('#name').val();
var code=$('#code').val();
var image=$('#image').val();
var content=$('#content').val();
if (company_id==''){
alert('请选择所属单位');
$('#company_id').focus();
return false;
}
if (name==''){
alert('请输入姓名');
$('#name').focus();
return false;
}
if (code==''){
alert('请输入业务代码');
$('#code').focus();
return false;
}
if (code.length!=10){
alert('业务代码必须为10个数字');
$('#code').focus();
return false;
}
if (image==''){
alert('请输入上传头像');
$('#image').focus();
return false;
}
if (content==''){
alert('请输入留言内容');
$('#content').focus();
return false;
}
/*if (content.length!=20){
alert('内容最多20字以内');
$('#content').focus();
return false;
}*/
var action = $('#ajax_form').attr('action');
$.ajax({
type: "post",
url: action,
data: $("#ajax_form").serialize(),
success: function(data) {
if (data.status==200){
alert(data.msg);
//$('#ajax_form')[0].reset()
window.location.href="{:url('index_success')}";
}else{
return alert(data.msg);
}
},
error: function(data) {
return alert(data.msg);
}
})
});
//上传图片
$(document).on('change',".file",function(){
var obj=this;
var action = "{:url('home/Upload/homeUpload')}";
var file=obj.files[0];
//获取文件后缀
var str=file.name;
var pos = str.lastIndexOf(".");
var ext = str.substring(pos+1,str.length);
var ext = ext.toLowerCase();//所有字符转换小写
//获取格式数组
var upload_ext="jpg,jpeg,gif,bmp,png";
var upload_ext_json=upload_ext.split(',');
var status=$.inArray(ext,upload_ext_json);
//var status=upload_ext_json.indexOf(ext);
if (status<0){
alert("图片后缀不满足(jpg,jpeg,gif,bmp,png)");
return false;
}
//判断文件大小
var size=file.size;
if (size>1024*3*1024){
alert("图片超过3M!上传失败");
return false;
}
//进行上传
var xhr = new XMLHttpRequest();
xhr.open("post", action, true); // 上传地址
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
// 监听状态,实时响应
// xhr 和 xhr.upload 都有progress事件,xhr.progress是下载进度,xhr.upload.progress是上传进度
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = Math.round(event.loaded*100/event.total);
console.log('%d%', percent);
$("#upprog").text(percent+'%');
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = $.parseJSON(xhr.responseText); // 返回格式,此处为json,可以为别的格式
var num=$(obj).attr("number");
if (str.status==200){
$(".image"+num).val(str.url);
//$(".state"+num).text('已上传');
html_str="<img src='"+str.url+"' width='120px' height='120px'/>";
$('#show_image').html(html_str);
}else{
alert(str.msg);
}
}
}
}
var fd = new FormData();
fd.append('file', file);
xhr.send(fd);
}) ;
</script>