JQuery+AJAX file upload demo (Python+flask as web server)
2016-03-02 21:27
555 查看
HTML code:
JS code:
new FormData($(“#moment-pane-upload-form”)[0]) can be replaced by data constructed by
data.append(‘image’,$(“#moment-pane-file-btn”)[0].files[0])
be careful of $(“#moment-pane-upload-form”)[0] and $(“#moment-pane-file-btn”)[0].files[0]
HTTP ERROR 500 may occurred, we need to set data=request.get_json(force=True), which ignore the MIME type and take everything as json . Why?I have set the contentType and dataType already.
<form id="moment-pane-upload-form" enctype="multipart/form-data"> <input id="moment-pane-file-btn" type="file" name="image" style="display:none" multiple> </form>
JS code:
var data=new FormData() data.append('image',$("#moment-pane-file-btn")[0].files[0]) $.ajax({ url:"/upload", type:'POST', data:new FormData($("#moment-pane-upload-form")[0]), cache:false, processData:false, contentType:false, error:function(){ console.log("upload error") }, success:function(data){ console.log(data) console.log("upload success") } })
new FormData($(“#moment-pane-upload-form”)[0]) can be replaced by data constructed by
data.append(‘image’,$(“#moment-pane-file-btn”)[0].files[0])
be careful of $(“#moment-pane-upload-form”)[0] and $(“#moment-pane-file-btn”)[0].files[0]
@app.route('/upload',methods=['POST']) def upload(): file=request.files['image'] filename=file.filename.split('.')[0]+'_new.'+file.filename.split('.')[-1] path=app.config['UPLOAD_FOLDER']+'/'+filename print file.filename,filename,path file.save(path) print 'GET=',file.filename print 'UPLOAD=',filename,'#'*50 return jsonify({"path":path}) @app.route('/download/<filename>') def download(filename): print 'DOWNLOAD=',filename,'*'*50 return send_from_directory(app.config['UPLOAD_FOLDER'],filename) if __name__=='__main__': app.run(host='192.168.16.163',debug=True)
HTTP ERROR 500 may occurred, we need to set data=request.get_json(force=True), which ignore the MIME type and take everything as json . Why?I have set the contentType and dataType already.
相关文章推荐
- js与jquery实现搜索框提示文字显示与隐藏
- 利用jQuery中hover()和cookie机制编写的小程序
- jQuery--加一行减一行
- jQuery--后台主机列表编辑
- IE8 jquery ajax获取静态资源报错TypeError 拒绝访问
- JqueryEasyUi
- jQuery与其他JS库的共存问题
- 关于jQuery新的事件绑定机制on()的使用技巧
- jquery.blockUI.2.31.js 弹出层项目介绍
- MVC+jQuery 无刷新导出EXCEL的过程(伪excel格式)
- jquery noConflict
- JQuery-复选框的操作(摘自<锋利的JQuery>)
- jquery function Optional Arguments
- jQuery的ready()事件与js中的onload事件的区别
- jquery表单验证框架 jquery.validate.min.js的使用
- jquery自学
- 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。
- jQuery MiniUI 在线示例
- jquery 的mmgrid 加载数据时的传参数的方式
- 用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容