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>