jquery.form上传文件

建立test文件夹

PHP代码:

<?php
//var_dump($_FILES[‘file‘]);exit;

if(isset($_GET[‘option‘]) && $_GET[‘option‘]==‘delete‘){
	@file_put_contents(dirname(__FILE__)."/------------0.txt", $_GET[‘path‘]."\r\n",FILE_APPEND);
	unlink($_GET[‘path‘]);
	$rs[] = array(
		‘success‘=>true,
		‘info‘=>‘ok‘
	);
	if(file_exists($_GET[‘path‘])){
		$rs[][‘success‘]=false;
		$rs[][‘info‘]=‘未删除‘;
	}
	die(json_encode($rs));
}

if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < (1024*1024)))
{
	if ($_FILES["file"]["error"] > 0)
	{
		echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
	}
	else
	{
		if (file_exists("test/" . $_FILES["file"]["name"]))
		{
			$fn = $_FILES["file"]["name"];
		}
		else
		{
			$imgurl = substr($_FILES["file"]["name"], strpos($_FILES["file"]["name"], ‘.‘));
			$imgurl = date("YmdHis",time()).$imgurl;
			move_uploaded_file($_FILES["file"]["tmp_name"],"test/" . $imgurl);
			$fn = "test/" . $imgurl;
		}
	}
	$return_str[] = array(
		‘guid‘=>date(‘His‘,time()),
		‘path‘=>‘test/‘,
		‘fileName‘=>$fn,
		‘success‘=>true
	);
}
else
{

	$return_str[] = array(
		‘guid‘=>date(‘His‘,time()),
		‘path‘=>‘test/‘,
		‘fileName‘=>$_FILES["file"]["name"],
		‘success‘=>false,
		‘error‘=>$_FILES["file"]["error"]
	);
}
	echo json_encode($return_str);
?>

  

HTML代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>文件上传</title>
    <style type="text/css">
        .btn {
            position: relative;
            background-color: blue;
            width: 80px;
            text-align: center;
            font-size: 12px;
            color: white;
            line-height: 30px;
            height: 30px;
            border-radius: 4px;
        }
            .btn:hover {
                cursor: pointer;
            }
            .btn input {
                opacity: 0;
                filter: alpha(opacity=0);
                position: absolute;
                top: 0px;
                left: 0px;
                line-height: 30px;
                height: 30px;
                width: 80px;
            }
        #fileLsit li span {
            margin-left: 10px;
            color: red;
        }
        #fileLsit {
            font-size: 12px;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div class="btn">

        <span>添加附件</span>
        <!--这里注意:file 标签必须具有name属性,由于没有加name属性,文件上传不到服务到哪-->
        <input type="file" id="fileName" name="file" />
    </div>
    <ul id="fileLsit" style="border:1px solid red;">
    </ul>
    <!--引入jquery类库-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <!--引入jquery.form插件-->
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript">
        jQuery(function () {
            var option =
                {
                    type: ‘post‘,
                    dataType: ‘json‘, //数据格式为json
                    resetForm: true,
                    beforeSubmit: showRequest,//提交前事件
                    uploadProgress: uploadProgress,//正在提交的时间
                    success: showResponse//上传完毕的事件
                }
            jQuery(‘#fileName‘).wrap(
                ‘<form method="post" action="test.php" id="myForm2"  enctype="multipart/form-data"></form>‘);
            jQuery(‘#fileName‘).change(function () {
                $(‘#myForm2‘).ajaxSubmit(option);
            });
        });
        //删除文件
        var deleteFile = function (path, guid) {
            console.log(path+‘/‘+guid);
            jQuery.getJSON(‘test.php?option=delete‘, { path: path }, function (reslut) {
                console.log(path+‘/‘+guid+‘‘+reslut[0].info);
                if (reslut[0].success) {//删除成功
                    jQuery(‘#‘ + guid).remove();
                    console.log(‘删除成功‘);
                } else {//删除失败
                    alert(reslut[0].info);
                }
            });
            console.log(‘end‘);
        }
        //上传中
        var uploadProgress = function (event, position, total, percentComplete) {
            jQuery(‘.btn span‘).text(‘上传中...‘);
        }
        //开始提交
        function showRequest(formData, jqForm, options) {
            jQuery(‘.btn span‘).text(‘开始上传..‘);
            var queryString = $.param(formData);
        }
        //上传完成
        var showResponse = function (responseText, statusText, xhr, $form) {
            console.log(responseText);
            if (responseText[0].success) {//成功之后返回文件地址、文件名称等信息 拼接呈现到html里面。
                var str = ‘<li id="‘ + responseText[0].guid + ‘"><a href="‘ + responseText[0].fileName + ‘" target="_blank">‘ + responseText[0].fileName + ‘</a><span onclick="deleteFile(\‘‘ + responseText[0].fileName + ‘\‘,\‘‘ + responseText[0].guid + ‘\‘)"  >删除</span></li>‘;
                jQuery(‘#fileLsit‘).append(str);
            }
            jQuery(‘.btn span‘).text(‘上传完成‘);
            jQuery(‘.btn span‘).text(‘添加附件‘);
        }
    </script>
</body>
</html>

时间: 2024-10-19 09:44:42

jquery.form上传文件的相关文章

jQuery.form 上传文件

今年大部分是都在完善产品,这几天遇到了一个问题,原来的flash组件不支持苹果浏览器,需要改.在网上搜了下,看到一个jQuery.form插件可以上传文件,并且兼容性很好,主要浏览器大部分都兼容,插件官网: http://malsup.com/jquery/form/.还有就是需要jQuery类库. 结果图片: 前端代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

c# 模拟表单提交,post form 上传文件、大数据内容

表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每一份资料的边界 (boundary),用以产生多重信息部份 (message part).而 HTTP 服务器可以抓取 HTTP POST 的信息, 基本内容:1. 每个信息部份都要用 --[BOUNDARY_NAME] 来包装,以分隔出信息的每个部份,而最后要再加上一个 --[BOUNDARY_N

MVC3+jquery Uploadify 上传文件

最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地址:http://www.uploadify.com/download/ 1.引用文件 <link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet"

jquery.uploadify上传文件配置详解(asp.net mvc)

页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery upload上传文件(asp.net mvc)配置</title> <script src="Resources/jquery.js"

使用HTML的表单form上传文件,需要考虑的几个问题

应用系统中经常需要有文件上传功能,一般的做法都是使用HTML的<form>和<input type="file">,或者使用第三方文件上传组件,如swfupload和uploadify.我们都知道如果向服务器提交数据,一般来说都是使用POST请求,请求数据会放在请求体中,以key1=value1&key2=value2的形式.这样的报文,服务器是很容易解析的.如果是上传文件,通过httpwatch抓包工具,我们可以发现:文件的内容也是放在post请求体中

jQuery Ajax上传文件

function UploadFileExcel() { var file = $("#file_upload")[0].files[0]; var form = new FormData(); form.append("file", file); form.append("uid", uid); form.append("token", token); $.ajax({ url: eshopUrl + "/inde

cordova+jquery form上传里面的一些诡异坑

在浏览器里面执行很正常的代码,打包到手机上测试就出问题了,浏览器中的执行版本如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>up test</title> 6 </head> 7 <body> 8 <h1>上传测试</h1> 9

[Plugin] JQuery.uploadify上传文件插件的使用详解For ASP.NET

URL:http://www.cnblogs.com/xiaopin/archive/2010/01/21/1653523.html 今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到一个还可以的,本来想改成类似于腾讯QQ相册那种方式,仔细看了一下是Flash的, 而且那个极速上传插件也不知道用什么做的?问了一下,说是什么cgi. 搞得一头雾水! 后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..!

jquery ajaxform上传文件返回不提示信息的问题

在使用jquery的ajaxform插件进行ajax提交表单并且上传文件的时候,返回类型datatype :json但是后台通过写出一个json对象后,在执行完以后没有进入success函数,而是直接弹出一个下载窗口,将json串当下载来处理了.后来发现解决方法是,不能把json串以json的形式写出来,而是以"text/html"的格式,并把json串放到textarea标签中. 例如: response.setContentType("text/html;charaset