AppCan做的图片上传代码

存在AppCan里的网页 index.html

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
    </head>
    <body class="um-vp" ontouchstart>
        <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
            <div id="content" class="ub-f1 tx-l ">

            </div>
            <!--content结束-->

        </div>
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
    </body>
    <script>
        appcan.ready(function() {
            appcan.frame.open("content", "http://benchmark.shinho.net.cn/XHR/index.html", 0, 0);
            window.onorientationchange = window.onresize = function() {
                appcan.frame.resize("content", 0, 0);
            }
        });

        function Goto(popName){
            appcan.openWinWithUrl(popName,‘pages/upload.html‘);
        }

        function Save(val){
            appcan.request.ajax({
                type : ‘POST‘,
                url : ‘http://benchmark.shinho.net.cn/webapp/picturetest.aspx‘,
                //添加参数
                data : {
                    file:{path:val}
                },
                //期望的返回类型
                dataType : ‘html‘,
                headers:{
                    MIME: ‘multipart/form-data‘
                },
                success : function(data) {
                    //获取内容
                    alert("上传成功!");
                    appcan.window.evaluatePopoverScript({
                        name:‘‘,
                        popName:‘content‘,
                        scriptContent:"SendUrl(‘"+data+"‘)"
                    });
                },
                error : function(xhr, type) {
                    alert(‘上传错误!‘);
                }
            })
        }
    </script>
</html>

云端页面的程序

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="欣和人" />
<meta name="description" content="欣和人">
<title>欣和人</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link href="css/reset_v4.css" type="text/css" rel="stylesheet" media="all" />
<link rel="stylesheet" type="text/css" href="css/wap_v2.css" media="all">
<style type="text/css">
    .imglist{width:58%;margin:0 auto;}
</style>
</head>
<body>
<ul class="mlist">
  <a href="message.htm">我的消息</a> <a href="messub.htm">我的投稿</a>
</ul>
<div class="nav">
  <div class="page-header"> <a href="index.html" target="_self" title=""><img src="images/topprev.png" /></a> <a href="index.html" target="_self" title=""><img src="images/logo.png" /></a> <a target="_self" title="" class="headerright list"><img src="images/toplist.png"/><span>2</span></a> <a href="search.htm" target="_self" title="" class="headerright"><img src="images/topsearch.png"/></a> <a href="submission.htm" target="_self" title="" class="headerright"><img src="images/topedit.png"/></a>
    <div class="clear"></div>
  </div>
  <div class="nav_box">
    <div class="nav_bor">查看其他期</div>
    <div class="nav_d" id="wrapper1">
      <ul class="nav_u">
      </ul>
    </div>
    <div class="sab arr" ><img src="images/down.png" /></div>
    <ul class="nav_u_down">
    </ul>
  </div>
</div>
<div class="wrapper submission">
  <div class="title">
    <input id="title" type="text" placeholder="请填入稿件标题">
    <div class="clear"></div>
  </div>
  <div class="contain">
    <textarea id="content" placeholder="请填写图文正文......"></textarea>
    <div class="clear"></div>
  </div>
  <div class="imglist">

  </div>
  <button class="subbut" onClick="upload();">上传图片</button>

  <div class="clear"></div>
</div>
<button class="subfixbut" onclick="tg();">提交</button>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/controllers.js"></script>
<script type="text/javascript">
    (function ($) {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    })(jQuery);
$(document).ready(function(){
    $(".page-header .list").click(function(){
        $(".mlist").slideToggle("slow");
    });
        $.ajax({
            type: "GET",
            url: "http://www.minierp.net.cn:8005/api/Journal/GetAllJournals",
            success: function (data) {
                var obj = eval(‘(‘ + data + ‘)‘);
                //$(".nav_u").append("<li><a href=‘index.html?id=" + obj[0].journal_id + "‘>" + obj[0].journal.substring(2, 9) + "期" + "</a></li>");
                //for (i = 1; i < 6; i++) {
                for (i = obj.length - 1; i >= obj.length - 6 || i >= 0; i--) {
                    $(".nav_u").append("<li><a href=‘index.html?id=" + obj[i].journal_id + "‘>" + obj[i].journal.substring(2, 9) + "期" + "</a></li>");
                }
                for (i = 6; i <= obj.length; i++) {
                    $(".nav_u_down").append("<li><a href=‘index.html?id=" + obj[i].journal_id + "‘>" + obj[i].journal.substring(2, 9) + "期" + "</a></li>");
                }
            }
        });
    });

    $(function(){
         function dropNav(){
            var $btn=$(".arr"),
                $Mn=$(".nav_u_down"),
                $true=true;
                $Mn.fadeOut();
              $btn.bind("click",function (e){
                if($true){
                    $Mn.fadeIn();
                    $(".nav_box").addClass("nav_box1");
                    $true=false;
                }else{
                    $Mn.fadeOut();
                    $(".nav_box").removeClass("nav_box1");
                    $true=true;
                }
                e.preventDefault();
                return false;
        });
        $Mn.bind("click" ,function (e){
            $Mn.fadeIn();
            $(".nav_box").addClass("nav_box1");
            $true=false;
            e.stopPropagation();
        });
        $(document).bind("click" ,function (){
            $Mn.fadeOut();
            $(".nav_box").removeClass("nav_box1");
            $true=true;
        });
    };
    $(function (){
        dropNav();
    });
    })
    function tg() {
        var files = "";
        var s = $(".imglist img");
        for(i=0;i<s.length;i++){
            files += $(s).attr("src")+";";
        }
        $.ajax({
            type: "POST",
            url: "http://www.minierp.net.cn:8005/api/Article/PostAritcle",
            data: { pTitle: $("#title").val(), pContent: $("#content").val(), files: files },
            success: function (result) {
                if (result == ‘OK‘) {
                    alert("投稿成功!");
                    window.location.href = "submission.htm";
                } else {
                    alert("投稿失败!");
                }
            }
        });
    }
    $(function () {
        if ($.getUrlParam(‘id‘) != "") {
            $.ajax({
                type: "POST",
                url: "http://www.minierp.net.cn:8005/api/Article/GetArticleEdit",
                data: { articleid: $.getUrlParam(‘id‘) },
                success: function (data) {
                    var obj = eval(‘(‘ + data + ‘)‘);
                    $("#title").val(obj[0].article_title);
                    $("#content").val(obj[0].article_content);
                    del($.getUrlParam(‘id‘));
                }
            })
        }
    })
    function del(id) {
        $.ajax({
            type: "DELETE",
            url: "http://www.minierp.net.cn:8005/api/Article/DeleteArticle",
            data: { articleid: id }
        })
    }
    function upload(){
        //uexWindow.evaluateScript("", 0, "Goto(‘pics‘);");
        uexImageBrowser.cbPick = cbPick ;
        uexImageBrowser.pick();
    }
    function SendUrl(url){
        var h = $(".imglist").html();
        h += "<img src=‘"+url+"‘ alt=‘‘ style=‘max-width:60px;max-height:60px;margin-right:15px;‘/>";
        $(".imglist").html(h);
    }

    function cbPick(opId,dataType,p) {
        uexWindow.evaluateScript("", 0, "Save(‘"+p+"‘);");
    }
</script>
时间: 2024-10-05 04:12:24

AppCan做的图片上传代码的相关文章

【西祠日志】【07】努力努力,找资料,思考,怎么做asp图片上传

[西祠日志][07]努力努力,找资料,思考,怎么做asp图片上传  (2015.07.23周四) 今天忘了带本子,直接写在书上了笔记,晚点还是夹在本子里: 学了这么久的web应用,一直都没时间去做一点,相对复杂点得应用,比如现在要考虑的图片上传,或者是接下来要加强学习的正则表达式.防SQL注入.验证码的实现.图片水印功能等,这的确是应该作为我学习的第二个阶段,做一点相对复杂一点的应用功能,考虑怎样使自己做的网站更加健壮,今天主要是在找asp资料学习图片上传,考虑了下js实现web富文本编辑器,然

图片上传代码

client页面上传到上传到服务器并且在服务器保存 xhtml页面 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

VUE2.0+VUE-Router做一个图片上传预览的组件

之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的这个是项目中用户反馈功能而来的,收获还是挺多的. 收获:dom操作=>数据操作       router的使用       组件的使用,具体总结放在尾部. 功能:1.上传图片 2.显示缩略图 3.可以删除 4.可以重新选择文件 先上成品图(主要抽取图片这块),自己在家主要做的功能,样式就不计较了.

jq upload图片上传代码

/* * 图片上传 * */ function postImgData() { $("#addFileInfo input[name='file']").change(function () { console.log($(this).val()) if (!$(this).val()) { return } var fileTyle = $(this).val().split("."); console.log(fileTyle); if (fileTyle[1]

php图片上传代码

<?php // 连接数据库 $conn[email protected]mysql_connect("localhost","root","") or die(mysql_error()); @mysql_select_db('water',$conn) or die(mysql_error()); // 判断action $action = isset($_REQUEST['action'])? $_REQUEST['action']

转载图片上传预览 代码

1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte

HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的整理思路,写到博客里还能做个备忘. 1) 跨域通讯 现在做企业项目,前端很不自然的会大量使用iframe标签,我以前在文章里提到iframe是一个效率极其低下的标签,但是如果项目没有什么性能的苛求,使用iframe还是非常的方便的. 使用iframe经常碰到父子窗体通讯的问题,我们看看下面的代码:

微信小程序开发(二)图片上传+服务端接收

文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/54312573 前几天做了图片上传功能,被坑了一下.我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的

KindEditor图片上传到七牛云

自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEditor的源码和七牛的SDK看得云里雾里的,网上搜索又没有类似的解决方法,只好继续看源码自己搞了,弄了整整一个晚上,基本实现了,下面说说我的做法: 版本说明: KindEditor版本:4x 七牛SDK:7.x.x 后端脚本:PHP 先看一下七牛给出的表单模板,在这里file和token这两个表单项是必须