<img {if !$article[pic]}style="display: none"{/if} width="82" height="60" src="../attach/$article[pic]" id="pic"> 

$(function () {
var files = $(".files");
$("#fileupload").wrap("<form id='myupload' action="{$php_self}ajaxArticlePic" method='post' enctype='multipart/form-data'>");
$("#fileupload").change(function(){
$("#myupload").ajaxSubmit({ dataType: 'json', success: function(data) { $("#pic").css("display","block"); $("#pic").attr("src","../attach/"+data);$("#pic_name").val(data); },
error:function(xhr){alert("错误")}
});
});
});

ajax 上传图片 并预览的更多相关文章

  1. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  2. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  3. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  4. Django之利用ajax实现图片预览

    利用ajax实现图片预览的步骤为: 程序实现的方法为: 方法一: upload.html <!DOCTYPE html> <html lang="en"> ...

  5. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  6. React+ajax+java 上传图片并预览

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图 ...

  7. ajax之---上传图片和预览

    views.py def upload_img(request): nid=str(uuid.uuid4()) ret={'status':True,'data':None,'message':Non ...

  8. nodejs实现本地上传图片并预览功能(express4.0+)

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  9. (JavaScript)实现上传图片实时预览和(文件)大小判断

    唉,为什么我一个做大数据和后端的要为前端耗尽心力啊??!! 昨天在做一个网页时遇到了一个问题,有一处需要插入图片,我原本的想法是获取到上传文件的URL,然后动态插入img标签,设置src为图片的URL ...

随机推荐

  1. 如果有三个Bool型变量,请写出一程序得知其中有2个以上变量的值是true

    下面这篇文章是从StackOverflow来的.LZ面试的时候遇到了一道面试题:“如果有三个Bool型变量,请写出一程序得知其中有2个以上变量的值是true”,于是LZ做了下面的这样的程序: bool ...

  2. [Leetcode][Python]36: Valid Sudoku

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 36: Valid Sudokuhttps://oj.leetcode.com ...

  3. 关于hasOwnProperty()方法的应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C++ Primer 读书笔记 第1章

    1.1 编写简单的C++程序 每个C++程序都必须包含一个main函数,因为main函数是系统执行入口,且main函数是唯一被系统显示调用的函数. 定义函数必须指定4个元素:返回类型.函数名.形参表. ...

  5. 利用mapreduce清洗日志内存不足问题

    package com.libc; import java.io.IOException; import java.io.UnsupportedEncodingException; import ja ...

  6. iOS7 NavigationController 右滑手势问题

    苹果一直都在人机交互中尽力做到极致,在iOS7中,新增加了一个小小的功能,也就是这个api:self.navigationController.interactivePopGestureRecogni ...

  7. webService接口大全

    中文<->英文双向翻译WEB服务 获得标准数据 Endpoint: http://fy.webxml.com.cn/webservices/EnglishChinese.asmx Disc ...

  8. C++ try catch 捕获空指针异常,数组越界异常

    #include <exception> #include <iostream> using namespace std; /************************* ...

  9. G - 好老师

    G - 好老师 Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%lld & %llu Submit Statu ...

  10. 关于Scrapy框架的安装

    Scrapy介绍与环境安装 Scrapy介绍与环境安装 What is scrapy? An open source and collaborative framework for extractin ...