ajax上传文件 预览

需要用到:ajaxfileupload

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://3.zy62.com/ajaxfileupload.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="page-header">ajax上传</h1>

<form id="upload" action="https://api.weixin.qq.com/cgi-bin/media/upload?access_token=mdJiyvzApDgpaBuin0V4JbhdmsGcaPDJvsrOTdL0l8185JvqvW2WIS0EIKCP9ntFXf82fWaJfEWiRdivissAKKcR6pJlM6V66RtjN29rVjA&type=image" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" name="media" id="file">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<a class="btn btn-default" href="#" id="test" role="button">Link</a>
<p>
<img id="img" src=""/>
</p>
<script>
$(document).ready(function(){
	$(‘#test‘).click(function(){
		$.ajaxFileUpload({
			  url:‘{:U("Index/upload")}‘,
			  secureuri: false,
			  fileElementId:‘file‘,
			  dataType: ‘text‘,//返回数据类型
			  success: function (data, status){
			      //alert(data);
				  $("#img").attr("src","http://127.0.0.1/6/0604/Uploads/2015-06-06/"+data);
			  },
              error: function (data, status, e)//服务器响应失败处理函数
              {
                  alert(e);
              }
			});
		//$(‘#upload‘).submit();
	});
});
</script>
</div>
</body>
</html>

PHP接收文件:

public function upload(){
		$upload = new \Think\Upload();// 实例化上传类
		$upload->maxSize   =     3145728 ;// 设置附件上传大小
		$upload->exts      =     array(‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘);// 设置附件上传类型
		$upload->rootPath  =     ‘./Uploads/‘; // 设置附件上传根目录
		$upload->savePath  =     ‘‘; // 设置附件上传(子)目录
		// 上传文件 
		$info   =   $upload->upload();
		if(!$info) {// 上传错误提示错误信息
			//$this->error($upload->getError());
			echo 456;
		}else{// 上传成功
			echo $info[‘media‘][‘savename‘];
			//print_r($info);
			//$this->success(‘上传成功!‘);
		}
	}

效果预览:

时间: 2024-08-03 11:44:17

ajax上传文件 预览的相关文章

基于HTML5和JSP实现的图片Ajax上传和预览

本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHttprequest Level2中对二进制文件上传的支持(通过构建FormData对象进行支持)以及Servlet 3.0支持的Multiconfig注解来支持文件的上传.在Servlet 3.0 规范之前通常使用第三方库如commons-fileupload进行解决文件上传. HTML5 中的 File 对

MVC 上传文件+预览

学习记录    复习用 一.调用了Uploadify插件 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.(具体参数百度就是.) 二.上传文件的方法 namespace PM.Myjobweb.Controllers { public class FileOperationsController : Controller { BLL.pc_attachment bll_attachment = new BLL.pc_attachment(); // // GET:

基于HTML5多图片Ajax上传可预览

html5多图控件<input id="fileImage" type="file" size="30" name="files[]" multiple /> multiple 这个input的特性是html5新有的,所以IE6这么低级的货是无法兼容的. 这个属性相当于以前的这样的多图情况 <input id="fileImage" type="file" size=&

jQuery+HTML5实现上传文件预览

<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery-1.11.2.min.js"></script> </he

js 上传文件预览

1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat

servlet实现文件上传,预览,下载和删除

CreateTime--2017年9月4日09:24:59 Author:Marydon 一.准备工作: 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转成JSON对象需要jar包:commons-beanutils-1.8.3.jar.commons-collections-3.2.1.jar.commons-lang-2.6.jar.commons-log

form表单系列中文件上传及预览

文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.join('static/img', fafafa.name) with open(img.path, 'wb') as f: for item in fafafa.chunks(): f.write(item) function iframeSubmit(){ $('#ifm1').load(functi

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

【转】文件上传前预览

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w