首页 > 技术文章 > 一个图片上传的写法

yexuelaoren 2016-11-29 14:33 原文

html代码

<form class="employee-editInfo-logo clearfix" id="uploadform">
							              <img id="employee-editlogo" onclick="onEmployeeModImgSelect()" alt="员工个人头像"  src="" width="120" height="144"  class="fl">
							              <input type="file" id="employee-editlogo-btn" onchange="employeeModImgPreview()"  name="file" multiple="multiple" class="fl">
							              <div class="employee-uploadpic-btn fl" onclick="employeeupload()">本地上传</div>
							           </form>

  js代码

function onEmployeeModImgSelect(){
    	$.fileButton("employee-editlogo-btn", "employee-editlogo");
    };
    
    function  employeeModImgPreview(){
    	var filepath = $("#employee-editlogo-btn").val();
    	var fileArr = filepath.split(".");
		if (fileArr[fileArr.length - 1] != "jpg"
				&& fileArr[fileArr.length - 1] != "png"
				&& fileArr[fileArr.length - 1] != "gif"
				&& fileArr[fileArr.length - 1] != "bmp"
				&& fileArr[fileArr.length - 1] != "jpeg") {
			$.addMessage("文件格式不正确,请选择jpg,jpeg,png,gif,bmp格式的文件", "error");
			$("#employee-editlogo-btn").val("");
			$("#employee-editlogo").attr("src", "./assets/images/head.png");
			return;
		} else {
			$.imgPreview("employee-editlogo-btn", "employee-editlogo");
		}
    };
    

    var employeeupload = function() {
			
    	    var formData = new FormData($("#uploadform" )[0]); 
            $.ajax({ 
               url: 'http://10.0.28.99:8080/majordomo/upload/pictures', 
               type: 'POST', 
               data: formData, 
               async: false, 
               cache: false, 
               contentType: false, 
               processData: false, 
               success: function (data){ 
                 alert(data.data.photos); 
               }, 
               error: function (data){ 
            	 $.addMessage("请求出错了,请重试", "error");
              } 
           }); 
		}

  

推荐阅读