上传前
上传后
演示地址：https://www.gouguoyin.cn/ajaxImageUpload/demo使用方法1、先引入jquery和插件的css和js，注意先引入jquery<linkhref="./css/upload.min.css"type="text/css"rel="stylesheet"/><scriptsrc="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js"></script><scriptsrc="./js/upload.min.js"></script>2、HTML结构<divclass="upload-box1"></div><divclass="upload-box2"></div>3、插件配置$(".upload-box1").ajaxImageUpload({fileInput:'file1',//上传按钮名，即input[type=file]的name值ajaxUrl:'./upload1.php',//上传的服务器地址});$(".upload-box2").ajaxImageUpload({fileInput:'file2',//上传按钮名，即input[type=file]的name值ajaxUrl:'./upload2.php',//上传的服务器地址});4、服务端处理服务端处理没有特殊的限制，只要服务端接受file表单提交的数据处理后返回json格式数据，上传成功返回的json数据里必须含有code和src，其中code必须为200，src是上传后的图片url，上传失败返回的json数据里必须含有code和msg，其中code为错误码(不能是200)，msg为错误信息。以./upload1.php为例$file=$_FILES["file1"];//要和配置里的fileInput保持一致if(!isset($file['tmp_name'])||!$file['tmp_name']){echojson_encode(['code'=>401,'msg'=>'没有文件上传']);returnfalse;}if($file["error"]>0){echojson_encode(['code'=>402,'msg'=>$file["error"]]);returnfalse;}$upload_path=dirname(__FILE__)."/uploads/";$file_path="./uploads/";if(!is_dir($upload_path)){echojson_encode(['code'=>403,'msg'=>'上传目录不存在']);returnfalse;}if(move_uploaded_file($file["tmp_name"],$upload_path.$file['name'])){echojson_encode(['code'=>200,'src'=>$file_path.$file['name']]);returntrue;}else{echojson_encode(['code'=>404,'msg'=>'上传失败']);returnfalse;}参数说明配置项配置说明必选默认值fileInput上传按钮名，即input[type=file]的name值是 ajaxUrlajax请求地址是 imageUrl已上传的图片连接否[]ajaxData额外携带的json数据否{}allowZoom是否允许放大否trueallowType允许上传图片的类型否["gif","jpeg","jpg","bmp","png"]maxNum允许上传图片数量否3maxSize允许上传图片的最大尺寸，单位M否2appendMethod图片追加方式，before/after否beforebefore上传前回调函数否 success单次上传成功回调函数否 complete全部上传成功回调函数否 error上传失败回调函数否
评论