jQuery.filer文件上传插件简单使用

官网文档

demo

前端

demo.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery.filer Demo</title><link href="../static/jQuery_filer/css/jquery.filer.css" type="text/css" rel="stylesheet"/><link href="../static/jQuery_filer/css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet"/><link href="../static/jQuery_filer/css/custom.css" type="text/css" rel="stylesheet"/><script src="../static/jQuery_filer/js/jquery.min.js"></script><script src="../static/jQuery_filer/js/jquery.filer.min.js"></script><style type="text/css">.loader {border: 4px solid #c5c5c5;border-radius: 50%;border-top: 4px solid #27ae60;width: 25px;height: 25px;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;}/* Safari */@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.msg {margin-top: 5px;color: #FF5722;font-size: 18px;}</style>
</head>
<body>
<div><h1> demo</h1><form action="" method="POST" enctype="multipart/form-data" style="display: flex;"><input type="file" name="file" id="filer_input" multiple="multiple"><input type="button" class="btn-custom green" value="Submit" id="upJQuery"style="height: 35px;margin-left: 10px;margin-right: 5px;"><div id="loading"></div> <!-- loading 效果，点击submit时出现，后代返回后loading结束... --><div id="message">  <!-- 用于显示上传之后要显示的提示信息，例如错误信息等... --></div></form></div><script>$(document).ready(function () {$('#filer_input').filer({limit: 2, // 文件数量限制maxSize: 5, // 文件大小限制MBextensions: ["jpg", "png", "gif"], // 文件扩展名限制showThumbs: true // 是否显示浏览的图片信息}); // 配置filer$('#upJQuery').on('click', function () {// 使用FormData进行文件上传var fd = new FormData();files = $("#filer_input").get(0).files;fd.append("file", files[0]);fd.append("file", files[1]);$("#loading").addClass('loader');$.ajax({url: "/", // flask后端路由type: "POST",processData: false,contentType: false,data: fd, // form数据success: function (d) {$("#loading").removeClass('loader');data = $.parseJSON(d).data;if (data) {alert(data);}else {alert($.parseJSON(d).error);}}});});});
</script>
</body>
</html>

后端

app.py

from flask import Flask, render_template, request, jsonify
from werkzeug.utils import secure_filename
import os
import time
from datetime import timedelta
import sys
import jsonALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'bmp'])def allowed_file(filename):return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONSapp = Flask(__name__)
app.send_file_max_age_default = timedelta(seconds=1)@app.route('/', methods=['POST', 'GET'])
def upload():if request.method == 'POST':upload_files = request.files.getlist('file')faces = []if len(upload_files) < 2:return json.dumps({"error": "images number less than two"}, ensure_ascii=False)for f in upload_files:if not (f and allowed_file(f.filename)):return jsonify({"error": 1001,"msg": "please select an image or check the image type (allowed types: png,PNG,jpg,JPG,bmp)"})basepath = os.path.dirname(__file__)image_name = ''.join(str(uuid.uuid1()).split('-'))upload_path = os.path.join(basepath, 'static/images',secure_filename(image_name + f.filename[f.filename.rindex('.'):]))f.save(upload_path)return json.dumps({"data": "upload success! "}, ensure_ascii=False)return render_template('demo.html')if __name__ == '__main__':app.run()

demo文档结构

./
├── app.py
├── static
│ ├── images
│ │ ├── f5202ad2d20211e99301144f8a3b4854.jpg
│ └── jQuery_filer
│ ├── css
│ …
│ ├── js
│ …
├── templates
│ └── demo.html

jQuery.filer文件上传插件简单使用相关推荐

ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
20+ 个很棒的 jQuery 文件上传插件或教程（此文值得“推荐”和“收藏”）
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload ...
【转】jquery文件上传插件uploadify在.NET中session丢失的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 基于jQuery和Flash的多文件上传插件uploadify的确很好用,具体配置和使用方法见以前的一篇文章: <一款基 ...
html5文档样式,jQuery HTML5文件上传美化插件jQuery.filer
插件描述:jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文 ...
jquery 文件上传插件_10个jQuery文件上传插件
jquery 文件上传插件这篇热门文章于2016年7月更新,以反映文件上传插件的当前状态. 有关旧文章的评论已删除. 使用Ajax实施文件上传可能非常困难,特别是如果您需要拖放支持,图像预览或进度条 ...
jquery文件上传插件|进度条
jquery文件上传插件|进度条一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...
jQuery 文件上传插件：uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
jquery uploadify 多文件上传插件使用经验
2019独角兽企业重金招聘Python工程师标准>>> Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www ...
php jquery 实例教程,php jquery 多文件上传简单实例
这篇文章主要介绍了php jquery 多文件上传简单实例,有需要的朋友可以参考一下代码如下: Upload $(document).ready(function() { var settings ...

jQuery.filer文件上传插件简单使用

官网文档

demo

前端

后端

demo文档结构

jQuery.filer文件上传插件简单使用相关推荐

最新文章

热门文章