关于JS提交file 上传文件

 最近因写一个上传功能,不能刷新页面,且页面得有后台返回的信息,因而不能使用form直接提交表单,尝试使用is提交并接受返回数据,不多说代码如下:

前台:
<form id=‘pdf-form‘ enctype="multipart/form-data" method="POST"  action="" >
    <input type="hidden" name="order_id" value="<{$order.order_id}>">
    <table align="center" width="90%" border="0">
        <tr>
            <td><b>合同信息:</b>
                <a target="_self" href="<{link app=b2c ctl=site_paycenter act=download arg0=$contract_no}>" class="active">下载</a></td>
            <{if $sign ==1}>
            <td>
                <input type="file" name="inputpdf" id="inputpdf">
                <{button id="button" onclick="upload(this);"  class="btn-import" label="合同上传"}>
                <span id="span" style="display: none" class="success notice-inline">上传成功!</span>
            </td>
            <{/if}>
        </tr>
    </table>
</form>
js:
function upload(o){
    var data = new FormData(document.getElementById(‘pdf-form‘));
    data.append(‘CustomFile‘,‘this is data‘);
    var PDF = new XMLHttpRequest();
    PDF.open("post",‘<{link app=b2c ctl=site_paycenter act=uploadFile}>‘,true);
    PDF.onload = function(){
        if(PDF.status == 200){
            re =JSON.decode(PDF.responseText);
            console.log(re);
            if( re.rsp == ‘succ‘){
                document.getElementById(‘button‘).style.display= ‘none‘;
                document.getElementById("span").innerHTML=re.res;
                document.getElementById(‘span‘).style.display= ‘‘;
               // document.getElementById("url").href=‘.‘+re.url;
            }else{
                document.getElementById("span").innerHTML=re.res;
                document.getElementById(‘span‘).style.display= ‘‘;
            }
        }
    };
    PDF.send(data);
}
后台处理以及返回信息:
function uploadFile()
{
    $file = $_FILES[‘inputpdf‘][‘name‘];
    $filetempname = $_FILES[‘inputpdf‘][‘tmp_name‘];
    $filelist = explode(‘.‘,$file);
    $type = end($filelist);
    if($type != ‘pdf‘){
        $return = array (
            ‘rsp‘ => ‘fail‘,
            ‘res‘ => ‘请上传pdf文件!‘,
        );
        echo json_encode($return);exit;
    }
    //自己设置的上传文件存放路径
    $filePath = ‘./public/pdf/‘;
    $contract_name = $file;
    $string_md5 = md5 (md5($contract_name).time());
    $front_string = substr ($string_md5 ,0 ,31 );
    $contract_url = ‘s‘.$front_string.‘.pdf‘;    //pdf名称

    $uploadfile = $filePath .$contract_url;//上传后的文件名地址
    //move_uploaded_file() 函数将上传的文件移动到新位置。若成功,则返回 true,否则返回 false。
    $result = move_uploaded_file($filetempname, $uploadfile);//假如上传到当前目录下

    if($result == true){
        $orders = app::get(‘b2c‘)->model(‘orders‘)->getList(‘contract_no‘, array(‘order_id‘=>$_POST[‘order_id‘]));  //获取用户发票信息
        $contracts = app::get(‘b2c‘)->model(‘contract_list‘)->getList(‘*‘, array(‘contract_no‘=>$orders[0][‘contract_no‘]));  //获取用户默认收货地址

        $contract_no = $orders[0][‘contract_no‘];
        $delfile = $contracts[0][‘contract_url‘];
        $contracts[0][‘contract_url‘] = $uploadfile;
        $contracts[0][‘contract_name‘] = $contract_name;
        $contracts[0][‘uptime‘] = date(‘Y-m-d H:i:s‘,time());
      //  unset($contracts[0][‘id‘]);
        $flag = app::get(‘b2c‘)->model(‘contract_list‘)->update($contracts[0],array(‘id‘=> $contracts[0][‘id‘]));
        if($flag){
            if(file_exists($delfile)){
                unlink($delfile);
            }
            $return = array (
                ‘rsp‘ => ‘succ‘,
                ‘url‘ => "/paycenter-download-$contract_no.html",
                ‘res‘ => ‘上传成功!‘,
            );
            echo json_encode($return);exit;
        }
    }else{
        $return = array (
            ‘rsp‘ => ‘fail‘,
            ‘res‘ => ‘上传失败!‘,
        );
        echo json_encode($return);exit;
    }

}
时间: 2024-10-07 06:02:47

关于JS提交file 上传文件的相关文章

Js获取file上传控件的文件路径总结

总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = function(){ alert(getFullPath(this)) } function getFullPath(obj){ if(!obj){return;} if(!-[1,]){obj.select();return document.selection.createRange().text;} r

使用js清空input file上传文件的内容

html页面代码如下: <input id="file_input" type="file" onchange="upLoadFile(this)" value="" />js的代码如下,可以直接将上传文件input按钮的内容直接清空: var obj=document.getElementById('file_input');obj.outerHTML=obj.outerHTML; ---------------

Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)

目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次更新已经比较久了^_^! formidable简介 nodejs原生实现上传还是比较麻烦,有兴趣的自已去参考一下网上有网友写的代码 这里选择了formidable,也是githu

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

mvc4 使用input:file上传文件

@using (Html.BeginForm("AddNews", "NewsMgr", FormMethod.Post, new { enctype = "multipart/form-data" })) 前台页面上使用form提交,但是HtmlAttribute必须有这个属性 enctype = "multipart/form-data" 否则上传时提交到后台的Request.Files一直为空,count是0. 后台页面

struts使用html:file上传文件的时候文件名乱码解决

<body> <html:form action="/jwid/struts1x/15.3/form/upload.do?action=upload" enctype="multipart/form-data"> 文件:<html:file property="file" style="width:200px;"></html:file><br> 备注:<htm

input type=&#39;file&#39; 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) var isE

input type=file 上传文件,同一个文件第二次上传无反应

用input file上传文件,掉用onchange方法时,多次上传同一个文件时功能失效,不会发送ajax请求 input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可.event.target.value=“”: 设为空之后在次点击就可实现同一文件多次上传操作 原文地址:https://www

c#+js 使用formdata上传文件

如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/jquery-easyui-master/themes/default/easyui.css" rel="stylesheet