jQuery 图片上传插件，支持批量上传、预览、删除、放大、上传数量、上传大小、追加方式配置以及上传前、上传中和上传后的回调函数。
上传前
上传后
演示地址：http://www.gouguoyin.cn/ajaxImageUpload/demo
使用方法
1、先引入jquery和插件的css和js，注意先引入jquery
<link href="./css/upload.min.css" type="text/css" rel="stylesheet" /> <script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js"></script> <script src="./js/upload.min.js"></script>
2、HTML结构
<div class="upload-box1"></div> <div class="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']) {
echo json_encode(['code' => 401, 'msg' => '没有文件上传']);
return false;
}
if($file["error"] > 0) {
echo json_encode(['code' => 402, 'msg' => $file["error"]]);
return false;
}
$upload_path = dirname(__FILE__) . "/uploads/";
$file_path = "./uploads/";
if(!is_dir($upload_path)){
echo json_encode(['code' => 403, 'msg' => '上传目录不存在']);
return false;
}
if(move_uploaded_file($file["tmp_name"], $upload_path.$file['name'])){
echo json_encode(['code' => 200, 'src' => $file_path.$file['name']]);
return true;
}else{
echo json_encode(['code' => 404, 'msg' => '上传失败']);
return false;
}参数说明
| 配置项 | 配置说明 | 必选 | 默认值 |
|---|---|---|---|
fileInput |
上传按钮名，即input[type=file]的name值 | 是 | |
ajaxUrl |
ajax请求地址 | 是 | |
imageUrl |
已上传的图片连接 | 否 | [] |
ajaxData |
额外携带的json数据 | 否 | {} |
allowZoom |
是否允许放大 | 否 | true |
allowType |
允许上传图片的类型 | 否 | ["gif", "jpeg", "jpg", "bmp", "png"] |
maxNum |
允许上传图片数量 | 否 | 3 |
maxSize |
允许上传图片的最大尺寸，单位M | 否 | 2 |
appendMethod |
图片追加方式，before/after | 否 | before |
before |
上传前回调函数 | 否 | |
success |
单次上传成功回调函数 | 否 | |
complete |
全部上传成功回调函数 | 否 | |
error |
上传失败回调函数 | 否 |
-
上传证件照片。支持 jpeg、jpg、bmp、png 格式，图片大小不超过2M。 // $path string 图片路径 $response = $app->media->upload($path);
-
问题内容： Q.1我想将这种形式转换为ajax，但似乎我的ajax代码缺少某些内容。提交根本不做任何事情。 Q2。我还希望在选择文件时不等待提交时在更改时触发该函数。 这是JS。 和HTMl与php。 问题答案： 首先在ajax调用中包含成功和错误功能，然后检查它是否给您错误或什么？ 您的代码应该像这样
-
使用指南 组件介绍 图片上传组件 引入方式 import { Uploader } from 'feart'; components: { "fe-uploader": Uploader, }, 代码演示 基础用法 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象 <fe-uploader :after-read="afterRead" /> exp
-
图片上传 图片上传的实现主要使用了微信原生API wx.chooseImage(OBJECT) <template> <div class="page"> <div class="weui-uploader__bd"> <div class="weui-uploader__files" id="uploaderFiles"> <block v-for="it
-
接口说明 需要将图片上传到服务器上进行保存，然后接口会返回服务器图片的相对路径，开发者需要将路径保存起来 如需调用，请访问 开发者文档 来查看详细的接口使用说明 该接口仅开放给已获取SDK的开发者 API地址 POST /api/marker/1.0.0/uploadTabImg 是否需要登录 是 请求字段说明 参数 类型 请求类型 是否必须 说明 image MultipartFile form
-
本文向大家介绍ajax图片上传，图片异步上传，更新实例，包括了ajax图片上传，图片异步上传，更新实例的使用技巧和注意事项，需要的朋友参考一下 最近在研究ajax图片上传，图片异步上传，更新，留作参考。 直接上源码吧： js源码： js: html代码： 服务器端使用一般处理程序： 程序使用的是framework4.0，所以使用了一些扩展方法。 JsonTesult类代码： StatusMess
-
问题内容： 我尝试使用不带Django表单的Ajax上传图像。 它不返回错误。没关系，它保存在数据库“ name”和“ description”中，但不保存“ image” :( 我的代码： views.py models.py html javascript 问题答案： 这里的问题是Ajax代码，您不能直接通过变量发送图像。 为此，您必须创建FormData，然后将文件添加到其中，可以在此处找到
-
问题内容： 我想知道如何通过创建API服务来上传文件？ 路线 然后是HTML 我已经在服务器端启用了CORS 如果重要的话，我正在使用angular.js作为前端和ng-upload，但是也可以使用CURL语句！ 问题答案： 您应该处理流，如果它是wav，则上面的代码有效。对于图像，您应该存储在数据库上或上传到AWS S3或Google Storage